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');
  });
});

以下是fiddle page

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://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

是的，您使用touchstart和touchend。

Answer 3

要添加@ Jonathan的答案，还要结帐https://github.com/furf/jquery-ui-touch-punch，将触摸事件应用于鼠标对应部分。

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

3 个答案: