Событие клика дважды вызывается на касании в iPad - PullRequest
Новая
       36

Событие клика дважды вызывается на касании в iPad

17 голосов
/ 14 декабря 2011

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

Ответы [ 3 ]

42 голосов
/ 14 декабря 2011

iPad понимает как touchstart / -end и mousestart / -end.

Is запускается так: 

┌─────────────────────┬──────────────────────┬─────────────────────────┐
│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");
    }
};
22 голосов
/ 29 октября 2012

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

var isTouchSupported = "ontouchend" in document;
0 голосов
/ 17 мая 2019

Расширение ответа 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);
}
...