Событие Click, вызываемое дважды на touchhend в iPad

Я использую jquery animate для слайда. У меня есть стрелка в конце слайда и дается событие click на этой стрелке. Работа состоит в том, чтобы переместить один элемент внутри silde на щелчок и переместить всю silde на mousedown. Это отлично работает на настольных компьютерах, но в iPad два пункта входят в слайд за один клик. Я не понимаю, почему событие click вызывается дважды в 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 - это идентификатор стрелки в конце слайда. Я попытался выполнить unbind touchstart и touchend событие, но во время прокрутки слайда из-за развязки элемент не попадает внутрь слайда после одного элемента. No.nextItem() перемещает один элемент внутри слайда. left в $('.slide') - перемещение слайда влево. Пожалуйста, помогите мне найти решение, почему это происходит и как решить эту проблему для ipad.

Ответ 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");
    }
};

Ответ 2

Будьте осторожны с использованием сниффера UA для iPad/iPod. Вы выбрасываете все устройства Android с таким решением! Лучшим решением является обнаружение поддержки касания, оно будет работать на всех устройствах Mobile/Tablet:

var isTouchSupported = "ontouchend" in document;

Ответ 3

Расширяя ответ H Dog. Вот код, который работал для меня.

var isTouchSupported = "ontouchend" in document;
if (isTouchSupported) {
    $('#playanimationbtn').off("mouseup");
    $('#stopanimationbtn').off("mousedown");
    $('#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);
}