Події торкання на веб-сторінках

15

Від автора: є легіони безликих розробників обладнання та програмного забезпечення, яких ми повинні віддячити за виконання того, що на перший погляд здається простим переходом: прирівнювання дій мишею до засобів сенсорного управління.

Той факт, що цей перехід працює так гладко – трохи з області чудес, і дозволяє таким моделям взаємодії, як CSS 3D Origami, відповідати однаково добре на дотик пальцем або рух курсору, не вимагаючи при цьому додаткового кодування.

Проте розробники не можуть передбачити кожну випадковість. Неминуче виникають ситуації, де CSS :hover не транслює на сенсор так, як від нього очікується або потрібна. В подібних випадках вам доведеться або переглянути модель взаємодії, або кодувати користувальницький інтерфейс так, щоб зробити його придатним для керування дотиком.

Основні поняття

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

Переконайтеся, що області для дотику користувальницького інтерфейсу щонайменше розміром 50px × 50px. Досить складно точно натиснути на маленький елемент.

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

Складно уникнути деякої затримки. Зараз велика частина мобільних платформ мають вбудований період очікування 300мс для веб-подій дотику. Ця ⅓ -секундна затримка може дійсно виявитися важливою для ваших користувачів. Ми обговоримо вирішення цієї проблеми у статті: а зараз зрозумійте, що користувальницький інтерфейс на мобільному пристрої з-за цього не буде відчуватися як «моментальний». Зменшення або усунення будь-яких затримок переходу для мобільних користувачів – очевидний перший крок до виправлення цієї проблеми.

Виявлення сенсорних можливостей пристрою

Точне визначення сенсорних можливостей пристрою ускладнилося з появою IE 10, який щедро доповідає про наявність сенсорних можливостей навіть у тих пристроїв, які фізично не можуть підтримувати подібні дії. Найефективніший відомий мені код наступний:

function is_touch_device() {
return !!(‘ontouchstart’ in window)
|| !!(‘onmsgesturechange’ in window);
};

В якості функції його можна викликати в своєму коді майже де завгодно:

$(document).ready(function() {
if (is_touch_device()) {
// виконати спеціальні дії для пристроїв з підтримкою торкання
}
})

Управління подіями торкання

В залежності від контексту і платформи подія торкання запустить кілька дій:

touchstart → mouseneter → mousedown → click → mouseup → mouseleave → touchend

Наявність і порядок внутрішніх дій на різних платформах розрізняються, і кожна з них може неправильно перевести події CSS :hover або :focus. Щоб повністю скасувати дії, отвяжите їх від елементів з допомогою JQuery:

$(‘span.hitmonkey’).unbind(‘mousenter mouseleave touchend touchstart’);

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

$(‘span.hitmonkey’).unbind(‘touchstart’);

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

$(‘span.hitmonkey’).bind(‘touchstart’, function() {
// спеціальна активність при початку дотику для елемента, контрольована JavaScript’ом
});

Кількість можливих рішень проблеми численне, і тут неможливо розкрити їх детально; я продемонструю окремі приклади у своїй наступній статті.

Підвищена активність? Обійдемося без повторень.

Якщо очікується, що елемент інтерфейсу буде одержувати велику кількість сенсорного впливу в швидкому темпі, можливо, хорошою ідеєю стане відключення дій подвійного торкання за замовчуванням. Ці дії можуть включати копіювання (для зображень), виділення (для тексту) або збільшення – будь-які, здатні перешкодити користувачу отримати враження від сторінки.

span.hitmonkey {
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}

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

Як щодо повного відключення збільшення?

Можна відключити користувачеві можливість збільшувати сторінку:

На вибір також можна додати для пристроїв без підтримки viewport наступне:

Врахуйте, що відключення збільшення взагалі-то не рекомендується: крім іншого, зум дозволяє читати ваш сайт людям з ослабленим зором.

Висновок

В основному, трансляція програмним забезпеченням подій проведення мишею і натискання на сенсорний ввід працює дивно добре. А якщо не працює, то вирішення проблеми знаходиться «під рукою». Дуже важливо фізична тестування: емулятори не дадуть вам повного враження, настійно потрібен доступ до ряду пристроїв (в ідеалі – лабораторія тестування пристроїв).