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

Click event called twice on touchend in iPad

提问by user850234

I am using jquery animate for the slide. I have an arrow at the end of the slide and given the click event on that arrow. The working of it is to move one item inside the silde on click and move the entire silde on mousedown. This is working fine in desktop but in iPad two items are coming inside the slide at a time on click. I am not understanding why the click event is called twice in iPad. The sample code for the click is :

我正在为幻灯片使用 jquery 动画。我在幻灯片的末尾有一个箭头，并在该箭头上给出了点击事件。它的工作是在单击时在 silde 内移动一个项目，并在鼠标按下时移动整个 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_itemis the id of the arrow at the end of the slide. I have tried to unbindtouchstartand touchendevent but during slide scroll due to unbind the item does not come inside the slide after single item. No.nextItem()moves one item inside the slide. leftin $('.slide')is to move the slide left. Please help me find the solution why this is happening and how to solve this issue for ipad.

#next_item是幻灯片末尾箭头的 id。我曾尝试unbindtouchstart和touchend事件，但在滑动滚动期间，由于解除绑定，单个项目后该项目不会进入幻灯片。No.nextItem()在幻灯片内移动一项。leftin$('.slide')是向左移动幻灯片。请帮助我找到发生这种情况的解决方案，以及如何解决 ipad 的这个问题。

回答by andlrc

iPad both understands touchstart/-end and mousestart/-end.

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

Is gets fired like this:

像这样被解雇：

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

You have to detect if the user is on a tablet and then relay on the touch start things...:

您必须检测用户是否在平板电脑上，然后在触摸开始事物上进行中继...：

/********************************************************************************
* 
* 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";

and then bind it like this:

然后像这样绑定它：

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

You can also make a event that takes care of it, see:

您还可以制作一个处理它的事件，请参阅：

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

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

Basic normalized down 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.handle.call(this, event);
        });
    },
    teardown: function() {
        $(this).unbind(".myDownEvent");
    }
};

After jQuery 1.9.0 $.event.handlechanged name to $.event.dispatch, to support both you can write use this fallback:

在 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");
    }
};

回答by H Dog

Be careful with using a UA sniffer for iPad/iPod. You're ditching all Android devices with a solution like that! A better solution is to detect the touch support, it will work on all Mobile/Tablet devices:

在 iPad/iPod 上使用 UA 嗅探器时要小心。您正在使用这样的解决方案抛弃所有 Android 设备！更好的解决方案是检测触摸支持，它适用于所有移动/平板设备：

var isTouchSupported = "ontouchend" in document;

回答by saadat ali

Extending H Dog answer. Here is the code that worked for me.

扩展 H Dog 答案。这是对我有用的代码。

 if (isTouchSupported) {
    $('#playanimationbtn').off("mouseup");
    $('#stopanimationbtn').off("mouseup");
    $('#playanimationbtn').off("mousedown");
    $('#stopanimationbtn').off("mousedown");
    $('#playanimationbtn').off("click");
    $('#stopanimationbtn').off("click");
    document.getElementById("playanimationbtn").addEventListener("touchend", PlayAnimation);
    document.getElementById("stopanimationbtn").addEventListener("touchend", StopAnimation);
} else {
    $('#playanimationbtn').off("touchstart");
    $('#playanimationbtn').off("touchend");
    $('#playanimationbtn').off("touchmove");
    $('#playanimationbtn').off("touchend");
    $('#playanimationbtn').off("touchleave");
    $('#stopanimationbtn').off("touchstart");
    $('#stopanimationbtn').off("touchend");
    $('#stopanimationbtn').off("touchmove");
    $('#stopanimationbtn').off("touchend");
    $('#stopanimationbtn').off("touchleave");
    document.getElementById("playanimationbtn").addEventListener("click", PlayAnimation);
    document.getElementById("stopanimationbtn").addEventListener("click", StopAnimation);
}