Отслеживание и контроль мультитач событий на веб-страницах

Сейчас всё больше и больше приложений разрабатываются специально для мультитач устройств. Именно поэтому важно знать, как можно контролировать и управлять специальными событиями, характерными для этих устройств.

Однако разработчики не могут предусмотреть все случаи. Возникают ситуации, когда то же событие 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() {
    // событие touch-start для определённого элемента через JavaScript
});

Отключаем событие двойного нажатия

Двойное нажатие используется для увеличения изображений или зума… опять же для разных устройств по-разному. Сделать это можно так:

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

Данное решение не является идеальным для всех мобильных браузеров.

Что насчёт зума?

Так же мы можем отключить зум:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Или активировать для устройств, не поддерживающих Порт просмотра (viewport):

<meta name="HandheldFriendly" content="true">

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