jquery - iPad 触摸端上的点击事件被调用两次

Question

我正在使用 jquery animate 制作幻灯片。我在幻灯片末尾有一个箭头，并给出了该箭头上的单击事件。它的工作原理是单击时移动滑道内的一项，并按下鼠标时移动整个滑道。这在桌面上运行良好，但在 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。我尝试取消绑定(bind) touchstart 和touchend 事件，但在幻灯片滚动期间，由于取消绑定(bind)，该项目不会在单个项目之后进入幻灯片。 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";

然后像这样绑定(bind)它:

$('#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");
    }
};