圖像變化的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'); 
    }); 
}); 

這裏是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

要添加到@喬納森的回答，也檢出https://github.com/furf/jquery-ui-touch-punch其應用於觸摸事件給其的小鼠對應。