图像更改onclick无法在移动浏览器中使用

我有一个代码，可以在点击图像时更改图像。 但是，由于我使用的是mouseup / mousedown，有没有办法让它也可以在移动浏览器中使用？

$(document).ready(function(){ $(".menulink").eq(0).mouseup(function(){ $('#menu1').attr('src', 'http://sofzh.miximages.com/jquery/picture2.jpg'); }); $(".menulink").eq(0).mousedown(function(){ $('#menu1').attr('src', 'http://sofzh.miximages.com/jquery/picture1.jpg'); }); $(".menulink").eq(1).mouseup(function(){ $('#menu2').attr('src', 'http://sofzh.miximages.com/jquery/picture2.jpg'); }); $(".menulink").eq(1).mousedown(function(){ $('#menu2').attr('src', 'http://sofzh.miximages.com/jquery/picture1.jpg'); }); }); 

这是小提琴页面

Answer 1

是的，你需要使用touchstart和touchend 。 我也提高了效率，希望你不要介意。

 $(function(){ var $menulink = $('.menulink'), $menu1 = $('#menu1'), $menu2 = $('#menu2'); function setSrc($menu,$src){ $menu.src = $src; } $menulink.eq(0).on({ 'mouseup touchstart':function(){ setSrc($menu1[0],'http://sofzh.miximages.com/jquery/picture2.jpg'); }, 'mousedown touchend':function(){ setSrc($menu1[0],'http://sofzh.miximages.com/jquery/picture1.jpg'); } }); $menulink.eq(1).on({ 'mouseup touchstart':function(){ setSrc($menu2[0],'http://sofzh.miximages.com/jquery/picture2.jpg'); }, 'mousedown touchend':function(){ setSrc($menu2[0],'http://sofzh.miximages.com/jquery/picture1.jpg'); } }); }); 

这可能更有效，如果你不仅仅有两个，那么它们会特别有用。

 $(function(){ var $menulink = $('.menulink'); for(i=$menulink.length;i--;){ var $menu = $('#menu'+(i+1))[0]; $menulink.eq(i).on({ 'mouseup touchstart':function(){ $menu.src = 'http://sofzh.miximages.com/jquery/picture2.jpg'; }, 'mousedown touchend':function(){ $menu.src = 'http://sofzh.miximages.com/jquery/picture1.jpg'; } }); } }); 

只是另一种选择。

Answer 2

要添加到@ Jonathan的答案，还要检查https://github.com/furf/jquery-ui-touch-punch ，它将触摸事件应用于鼠标对应物。

Answer 3

编辑：不要使用click

是的，你使用touchstart和touchend 。