点击iPad上的touchend两次调用的事件

Question

我正在使用jquery animate来制作幻灯片.我在幻灯片的末尾有一个箭头,并在该箭头上给出了点击事件.它的工作原理是在点击时在silde中移动一个项目并在mousedown上移动整个silde.这在桌面上运行良好,但在iPad中,一次点击就会有两个项目进入幻灯片.我不明白为什么在iPad中调用click事件两次.点击的示例代码是:

    $('#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.我已尝试过unbind touchstart和touchend事件但是在滑动滚动期间由于解除绑定物品在单个项目后没有进入幻灯片内部.No.nextItem()在幻灯片中移动一个项目.leftin $('.slide')是向左移动幻灯片.请帮助我找到解决方案为什么会发生这种情况以及如何为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;