Почему событие 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/

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

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

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

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

Удачи!

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

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

Посмотрите FastClick