Понимание событий касания

Я пытаюсь заставить некоторые из моих библиотек работать с сенсорными устройствами, но мне трудно найти способы, как они поддерживаются и как они работают.

В принципе, есть 5 событий касания, но, похоже, существует консенсус среди мобильных браузеров только в событии touchstart (duh). Я создал fiddle в качестве тестового примера.

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

Цель состоит в том, чтобы попытаться выяснить, как обрабатывать краны, двойные краны и длинные отводы. Ничего необычного.

В принципе, это то, что происходит:

Активный браузер Android не запускает события касания. Он просто пытается имитировать щелчки мыши с кранами, стреляя mousedown, mouseup и click события последовательно, но двойные краны просто увеличивают и уменьшают страницу.

Chrome для Android запускает событие touchstart, когда палец касается экрана. Если он будет выпущен достаточно быстро, он запускает mousedown, mouseup, touchend и, наконец, события click.

В случае длительного касания примерно через полсекунды он срабатывает mousedown и mouseup, а touchend при поднятии пальца без события click в конце.

Если вы переместите свой палец, он несколько раз запускает событие touchmove, затем он запускает событие touchcancel, и после этого ничего не происходит, даже при событии touchend при поднятии пальца.

Двойной щелчок вызывает функции увеличения/уменьшения масштаба, но по событию он дважды комбинирует комбинацию touchstart - touchevent, при этом события мыши не запускаются.

Firefox для Android правильно запускает событие touchstart, а в случае коротких кратковременных срабатываний mousedown, mouseup, touchend и click впоследствии.

В случае длительного нажатия, он запускает события mousedown, mouseup и, наконец, touchend. Это то же самое для Chrome для этих вещей.

Но если вы двигаете пальцем, если огонь touchmove постоянно (как и следовало ожидать), но он не запускает событие touchleave, когда палец покидает элемент с помощью прослушивателя событий и не запускает touchcancel, когда палец выходит из окна просмотра браузера.

Для двойных кранов он ведет себя точно так же, как Chrome.

Opera Mobile делает то же самое в Chrome и Firefox для короткого нажатия, но в случае длительного нажатия активирует какую-то функцию совместного доступа, которую я действительно хочу отключить. Если вы переместите свой палец или дважды коснитесь, он будет вести себя так же, как Firefox.

Бета-версия Chrome работает обычным образом для кратковременных кранов, но в случае длинных кранов она больше не запускает событие mouseup, просто touchstart, а затем mousedown через полсекунды, затем touchend, когда палец поднят. Когда палец перемещается, теперь он ведет себя как Firefox и Opera Mobile.

В случае двойных кранов он не запускает события касания при масштабировании, но только при масштабировании.

Бета-версия Chrome показывает самое странное поведение, но я не могу жаловаться, так как это бета-версия.

Вопрос: существует ли простой способ поиска коротких кранов, длинных кранов и двойных кранов в наиболее распространенных браузерах сенсорных устройств?

Слишком плохо, что я не могу протестировать его на устройствах iOS с помощью Safari или IE для Windows Phone 7/Phone 8/RT, но если некоторые из вас могут, ваша обратная связь будет очень оценена.

Ответы

Ответ 1

Если вы еще этого не сделали, я бы предложил прочитать исходный код для Hammer.js

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

Между комментариями и кодом это около 1400 строк, есть отличная документация, и код легко понять.

Вы можете видеть, как автор решил решить множество общих событий касания:

Удерживать, касатьться, перетаскивать, перетаскивать, dragstart, dragend, dragup, dragdown, драфтфт, драма, салфетки, swipeup, swipedown, swipeleft, swiperight, преобразовать, трансформировать, преобразовать, вращать, щепотку, pinchin, pinchout, touch (начало распознавания жестов), отключение (обнаружение жестов заканчивается)

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

http://eightmedia.github.io/hammer.js/

Ответ 2

Там действительно отличный ресурс https://patrickhlauke.github.io/touch/tests/results/, в котором подробно описывается порядок событий в ошеломляющем количестве браузеров. Он также регулярно обновляется (в сентябре 2016 года он был обновлен в августе 2016 года).

Суть заключается в, по сути, все триггеры mouseover и связанные с ним события; большинство из них также запускают события касания, которые обычно завершаются (достигают touchend) до mouseover, а затем продолжаются до click (если изменение содержимого страницы не отменяет). Эти неудобные исключения, к счастью, относительно редки (сторонние браузеры android и Blackberry playbook).

Этот связанный ресурс переходит в впечатляющий уровень детализации, здесь образец первых трех из многих, многих тестов операционной системы, устройства и браузера:

Подводя итог некоторым ключевым моментам:

Мобильные браузеры

Все перечисленные браузеры запускают mouseover при первом касании. Только некоторые браузеры Windows Phone запускают его по второму нажатию.
Все триггеры click. В нем не указывается, какой отменить click, если mouseover изменяет страницу (я полагаю, что больше всего)
Большинство браузеров запускают mouseover после touchstart и touchend. Это включает в себя iOS7.1 Safari, Android, Chrome, Opera и Firefox для Android, а также некоторые (не все телефонные браузеры Windows).
Несколько браузеров Windows Phone (все версии Windows 8/8.1 и одна версия для 10) и несколько сторонних браузеров Android (Dolphin, Maxathon, UC) запускают mouseover после touchstart и touchend.
Только Blackberry Playbook запускает mouseover между touchstart и touchend
Только Opera Mini и Puffin (сторонний браузер Android) не имеют touchstart или touchend.

Настольные браузеры

Достаточно современные версии настольных компьютеров Chrome и Opera ведут себя как их мобильные аналоги, touchstart и touchend, а затем mouseover.
Браузеры Firefox и Microsoft (IE <= 11 и многие версии Edge) не запускают никаких событий touchstart и touchend.
Нет данных на компьютерах Mac, но, предположительно, браузеры Ma поддерживают touchstart и touchend, учитывая ограниченность интерфейсов сенсорного экрана Mac.

Там также невероятное количество данных в браузерах в сочетании с вспомогательными технологиями.

Ответ 3

Вот мое последнее замечание о событиях touch и mouse на Android 4.3

Opera, Firefox и Chrome, похоже, имеют стандартное поведение

В режиме прокрутки (touchstart-touchmove-touchhend):
- Не запускается событие мыши (исключая манипулятор).
- Mouseover срабатывает только в том случае, если touchstart и touchhend происходят на одном и том же элементе. (Touchstart-TouchMove-touchend-Mouseover)
- Если по умолчанию не задано значение touchstart, поведение по умолчанию не работает. никаких изменений в отношении стрельбы мыши не происходит.
On Tap (touchstart-touchhend):
- Все события мыши mouseover-mousemove-mousedown-mouseup-click fire после задержки
- Если по умолчанию не задано касание: только срабатывание мыши.

У браузера по умолчанию Android есть некоторые нестандартные поведения:

Мышь срабатывает перед касанием, что означает, что курсор всегда срабатывает.
Все события мыши загораются при нажатии, даже если по умолчанию не поддерживается сенсорный старт.

Ответ 4

Да, вы можете запустить таймер на touchstart и завершить его на touchend и сделать свой выбор там.

Также вы можете сделать... пусть говорят салфетки, мой запуск touchmove вы можете получить координаты "пальца" и посмотреть, сколько я путешествовал до того, как срабатывает touchend.

Я не знаю, есть ли какой-нибудь более простой способ, чем использовать библиотеку сенсорных событий, но я полагаю, вы могли бы легко написать один для простых событий "tap", "double tap", "swipe".