iPad上的touchend上单击事件两次 [英] Click event called twice on touchend in iPad

问题描述

我使用jquery动画幻灯片。我在幻灯片的结尾处有一个箭头，并在该箭头上给出了点击事件。它的工作是移动silde内的一个项目点击并移动整个silde在mousedown。这是工作正常在桌面上，但在iPad中，两个项目都进来的幻灯片内一次点击。我不明白为什么点击事件在iPad中被调用两次。点击的示例代码是：

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 :

    $('#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 在幻灯片的结尾。我尝试过 unbind touchstart 和 touchend 幻灯片滚动由于解除绑定项目不会进入幻灯片后单个项目。 No.nextItem（）在幻灯片中移动一个项目。在 $（'。slide'）中的左是向左移动幻灯片。请帮助我找到解决方案为什么这是发生和如何解决这个问题为ipad。

#next_item is the id of the arrow at the end of the slide. I have tried to unbind touchstart and touchend event 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. left in $('.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.

推荐答案

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

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

被激发如下：

┌─────────────────────┬──────────────────────┬─────────────────────────┐
│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";

，然后如下绑定：

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

b $ b

您还可以制作一个照顾它的活动，请参阅：

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

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

After jQuery 1.9.0 $。event.handle 更改名称为 $。event.dispatch ，以支持两者，您可以使用此备用：

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

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

这篇关于iPad上的touchend上单击事件两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！