Розуміння сенсорних подій

Я намагаюся змусити деякі свої бібліотеки працювати із сенсорними пристроями, але мені важко зрозуміти, як вони підтримуються та як вони працюють.

В основному, є 5 сенсорних подій , але, здається, є єдиний консенсус серед мобільних браузерів лише щодо цієї touchstartподії (duh). Я створив скрипку як тест.

Я протестував це на своєму Galaxy Note з Android 4 на борту, але ви можете перевірити посилання і в браузері на робочому столі.

Мета полягає в тому, щоб спробувати з’ясувати, як обробляти крани, подвійні та довгі крани. Нічого химерного.

В основному відбувається ось що:

Фондовий браузер Android не спрацьовує подія дотику. Він просто намагається емулювати клацання миші з відводами, стрілянина mousedown, mouseupі clickподії послідовно, але подвійні відводи тільки збільшувати і зменшувати масштаб тха сторінки.

Chrome для Android запускає подію сенсорного запуску, коли палець торкається екрана. Якщо вона вийде досить скоро, він стріляє , то 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 beta робить звичайне для коротких натискань, але у випадку довгих натискань він більше не запускає mouseupподію, просто touchstart, потім mousedownчерез пів секундиtouchend коли палець піднімається. Коли палець рухається, тепер він поводиться як Firefox та Opera Mobile.

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

Бета-версія Chrome демонструє найдивнішу поведінку, але я не можу поскаржитися, оскільки це бета-версія.

Питання в тому : чи є простий і спосіб спробувати виявити короткі, довгі та подвійні крани в найпоширеніших браузерах сенсорних пристроїв?

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

Якщо ви ще цього не зробили, я б запропонував прочитати вихідний код для Hammer.js

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

Між коментарями та кодом близько 1400 рядків, є чудова документація, і код легко зрозуміти.

Ви можете побачити, як автор вирішив вирішити багато загальних подій:

утримуйте, торкніться, подвійне натискання, перетягування, перетягування, перетягування, перетягування, перетягування, перетягування, перетягування, проведіть пальцем, проведіть пальцем вниз, проведіть пальцем вниз, пересуньтесь, проведіть пальцем, перетворіть, перетворіть запуск, перетворіть, обертайте, затискайте, зачіпайте, розтискайте, торкайтеся (виявлення жестів починається) , відпустити (виявлення жестів закінчується)

Думаю, після прочитання вихідного коду ви набагато краще зрозумієте, як працюють сенсорні події та як визначити, які події може обробляти браузер.

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

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

Суть полягає в тому, що по суті все викликає mouseoverподії та пов’язані з ними події; більшість також викликають сенсорні події, які зазвичай завершуються (охоплюють touchend) до, mouseoverа потім продовжуютьclick (якщо зміна вмісту сторінки це не скасовує). Ці незручні винятки, на щастя, відносно рідкісні (сторонні браузери для Android та посібник з BlackBerry).

Цей зв’язаний ресурс досягає вражаючого рівня деталізації, ось зразок перших трьох із багатьох, багатьох тестів операційної системи, пристрою та браузера:

Підсумовуючи деякі ключові моменти:

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

• Усі перелічені браузери запускаються 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 і безліч версій Краї) не викликають які - або touchstartі touchendподія.
• Немає даних про Mac, але, мабуть, жоден браузер Ma не підтримує touchstartі з touchendогляду на брак інтерфейсів сенсорного екрану Mac.

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

Так, ти можеш запустити таймер touchstartі закінчити його, touchendа потім зробити вибір.

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

Я не знаю, чи є якийсь простіший спосіб, аніж використання бібліотеки сенсорних подій, але я гадаю, ви могли б написати такий для простих подій "торкання", "подвійне натискання", "проведення пальцем" досить легко.

Ось моє останнє спостереження за подіями дотику та миші на Android 4.3

Opera, Firefox та Chrome, схоже, мають стандартну поведінку

1. При проведенні пальцем (touchstart-touchmove-touchend):

   1. Жодна подія миші (за винятком наведення курсора) не запускається.
   2. Наведення курсору миші спрацьовує, лише якщо сенсорний запуск і дотик відбувається на одному елементі. (touchstart-touchmove-touchend-mouseover)
   3. Якщо за замовчуванням заблоковано при сенсорному запуску: поведінка пальця за замовчуванням не працює. ніяких змін щодо запуску події миші не відбувається.

2. На дотик (touchstart-touchend):

   1. Усі події миші mouseover-mousemove-mousedown-mouseup-click fire після затримки
   2. Якщо за замовчуванням заборонено на сенсорному запуску: спрацьовує лише наведення миші.

Браузер Android за замовчуванням має деякі нестандартні способи поведінки :

1. Наведення курсору миші спрацьовує перед сенсорним запуском, що означає, що курсор миші завжди спрацьовує.
2. Усі події миші запускаються при натисканні, навіть якщо за замовчуванням заборонено при сенсорному запуску.