jquery - 图像更改 onclick 在移动浏览器中不起作用

Question

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

$(document).ready(function(){
  $(".menulink").eq(0).mouseup(function(){
        $('#menu1').attr('src', 'http://placehold.it/333/3ef/img/picture2.jpg');
  });
  $(".menulink").eq(0).mousedown(function(){
        $('#menu1').attr('src', 'http://placehold.it/333/fe3/img/picture1.jpg');
  });
  $(".menulink").eq(1).mouseup(function(){
        $('#menu2').attr('src', 'http://placehold.it/333/3ef/img/picture2.jpg');
  });
  $(".menulink").eq(1).mousedown(function(){
        $('#menu2').attr('src', 'http://placehold.it/333/fe3/img/picture1.jpg');
  });
});

这是小提琴页面

Answer 1

是的，您需要使用touchstartand 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://placehold.it/333/3ef/img/picture2.jpg');
        },
        'mousedown touchend':function(){
             setSrc($menu1[0],'http://placehold.it/333/3ef/img/picture1.jpg');
        }
    });

    $menulink.eq(1).on({
        'mouseup touchstart':function(){
             setSrc($menu2[0],'http://placehold.it/333/3ef/img/picture2.jpg');
        },
        'mousedown touchend':function(){
             setSrc($menu2[0],'http://placehold.it/333/3ef/img/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://placehold.it/333/3ef/img/picture2.jpg';
            },
            'mousedown touchend':function(){
                 $menu.src = 'http://placehold.it/333/3ef/img/picture1.jpg';
            }
        });
    }
});

只是另一个需要考虑的选择。

Answer 2

编辑：不要使用click

是的，您使用touchstartand touchend。

Answer 3

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