Почему событие touchstart после клика?

Здесь что-то странное, что я уверен, что работал в более ранних мобильных браузерах: в Chrome на Android и Safari на iOS кажется, что событие touchstart запускается после события click, а не раньше. Когда это изменилось?

Простой пример:

jQuery(function($) {
    var touched = false;
    $('#clicky').on('touchstart', function(evt){
        touched = true;
        evt.preventDefault();
    })
    .click(function(){
        if (!touched) {
            alert("somehow touch didn't fire")
        }
    });
})

Запустите эту скрипту, и вы увидите, что предупреждение появится на Android и iOS, когда оно на самом деле никогда не появится!

http://jsfiddle.net/quxnxu7d/2/

Ответы

Ответ 1

Я запускал его через Chrome на Android, и он работал так, как вы ожидали от меня. Я добавил предупреждение обработчику touchstart, и он выстрелил, чтобы убедиться, что он стрелял первым, и это произошло.

Взгляните на статью touch events mdn. В статье конкретно упоминается:

вызов функции preventDefault() в touchstart или первом событии touchmove серии предотвращает запуск соответствующих событий мыши

Click - событие мыши, поэтому он должен "работать" так, как вы ожидаете (и он работал у меня). Я проверил бы, что события действительно заканчиваются (используйте console.log() вместо alert()) в целевых браузерах. Если они есть, что вполне возможно с менее совершенными браузерами/спецификациями, попробуйте использовать другое событие мыши, например mouseup. Я предполагаю, что вы сможете найти событие, которое будет работать последовательно.

Удачи!

Ответ 2

Пробовали ли вы использовать mousedown вместо click? Таким образом, вы должны получать разные события для прикосновения и щелчка без двойного стрельбы. Вам также, вероятно, потребуется использовать keydown, чтобы этот сайт был доступен.

Ответ 3

Задержка в 300 мс между физическим нажатием и стрельбой события клика в некоторых мобильных браузерах (например, iOS Safari) Я столкнулся с той же проблемой, и плагин FastClick jQuery исправил это для меня

Посмотрите FastClick