點擊事件在iPad上touchend調用兩次

Question

我使用幻燈片的jquery動畫。我在幻燈片的末尾有一個箭頭，並在該箭頭上指定了單擊事件。它的工作原理是在點擊時移動silde中的一個項目並移動mousedown上的整個silde。這在桌面上工作正常，但在iPad中，兩個項目一次點擊就會進入幻燈片。我不明白爲什麼點擊事件在iPad中被調用兩次。用於點擊的示例代碼是：

$('#next_item').bind('mousedown touchstart MozTouchDown',function(e) {      
     $('.slide').animate({left:left},6000); 
    }); 

    $('#next_item').bind('mouseup touchend MozTouchRelease',function(e) { 
     No.nextItem();   
    }); 

#next_item是箭頭在滑動結束時的標識。我嘗試過unbindtouchstart和touchend事件，但在滑動滾動期間，由於取消綁定，該項目不會在單個項目之後進入幻燈片。 No.nextItem()在幻燈片中移動一個項目。 $('.slide')中的left是將滑塊向左移動。請幫我找到解決方案，爲什麼發生這種情況，以及如何解決這個問題的iPad。

Answer 1

iPad都能理解touchstart/-end和mousestart/-end。

是被炒魷魚是這樣的：

┌─────────────────────┬──────────────────────┬─────────────────────────┐ 
│Finger enters tablet │ Finger leaves tablet │ Small delay after leave │ 
├─────────────────────┼──────────────────────┼─────────────────────────┤ 
│touchstart   │ touchend    │ mousedown    │ 
│      │      │ mouseup     │ 
└─────────────────────┴──────────────────────┴─────────────────────────┘ 

你必須檢測，如果用戶是在平板電腦上，然後轉發在觸摸啓動的東西...：

/******************************************************************************** 
* 
* Dont sniff UA for device. Use feature checks instead: ('touchstart' in document) 
* The problem with this is that computers, with touch screen, will only trigger 
* the touch-event, when the screen is clicked. Not when the mouse is clicked. 
* 
********************************************************************************/ 
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); 
var myDown = isIOS ? "touchstart" : "mousedown"; 
var myUp = isIOS ? "touchend" : "mouseup"; 

，然後綁定它是這樣的：

$('#next_item').bind(myDown, function(e) { 

您也可以讓一個事件照顧它，請參閱：

http://benalman.com/news/2010/03/jquery-special-events/

基本歸按下事件：

$.event.special.myDown = { 
    setup: function() { 
     var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); 
     var myDown = isIOS ? "touchstart" : "mousedown"; 
     $(this).bind(myDown + ".myDownEvent", function(event) { 
      event.type = "myDown"; 
      $.event.handle.call(this, event); 
     }); 
    }, 
    teardown: function() { 
     $(this).unbind(".myDownEvent"); 
    } 
}; 

的jQuery 1.9.0 $.event.handle更名後$.event.dispatch，同時支持您可以編寫使用此回退：

// http://stackoverflow.com/questions/15653917/jquery-1-9-1-event-handle-apply-alternative 
// ($.event.dispatch||$.event.handle).call(this, event); 
$.event.special.myDown = { 
    setup: function() { 
     var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion)); 
     var myDown = isIOS ? "touchstart" : "mousedown"; 
     $(this).bind(myDown + ".myDownEvent", function(event) { 
      event.type = "myDown"; 
      ($.event.dispatch||$.event.handle).call(this, event); 
     }); 
    }, 
    teardown: function() { 
     $(this).unbind(".myDownEvent"); 
    } 
}; 

Answer 2

要小心使用iPad/iPod的UA嗅探器。你正在用這樣的解決方案拋棄所有的Android設備！更好的解決方案是檢測觸摸支持，它將適用於所有移動設備/平板設備：

var isTouchSupported = "ontouchend" in document;