在 iPad 的 touchend 上调用两次点击事件 [英] Click event called twice on touchend in iPad

问题描述

我正在为幻灯片使用 jquery 动画.我在幻灯片的末尾有一个箭头，并在该箭头上给出了点击事件.它的工作是在单击时在 silde 内移动一个项目，并在鼠标按下时移动整个 silde.这在桌面上运行良好，但在 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 是幻灯片末尾箭头的 id.我曾尝试 unbind touchstart 和 touchend 事件，但在滑动滚动期间，由于取消绑定该项目在单个项目后不会进入幻灯片.No.nextItem() 在幻灯片内移动一个项目.$('.slide')中的left是向左移动幻灯片.请帮我找到发生这种情况的解决方案，以及如何解决 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/-end 和 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) { 

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

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

http://benalman.com/news/2010/03/jquery-特殊事件/

基本归一化事件:

$.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 之后，为了支持两者你可以写使用这个回退:

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屋！