jquery – 点击事件在iPad上的touchend被叫两次

我正在使用jquery动画幻灯片。我在幻灯片的末尾有一个箭头，并给出了该箭头上的点击事件。它的工作是移动一个项目里面的silde点击并移动整个silde在mousedown。这在桌面上工作正常，但在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是幻灯片末尾箭头的ID。我试图解除touchstart和touchend事件的绑定，但在滑动滚动由于取消绑定项目不会进入幻灯片单项后。 No.nextItem()移动幻灯片中的一个项目。留在$(‘。slide’)是向左移动幻灯片。请帮我找到解决这个问题的解决方案，以及如何解决ipad的这个问题。

解决方法

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,teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};