События касания на веб-страницах

События касания на веб-страницах

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

Тот факт, что этот переход работает так гладко – немного из области чудес, и позволяет таким моделям взаимодействия, как 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.

Как насчет полного отключения увеличения?

Можно отключить пользователю возможность увеличивать страницу:

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

По выбору также можно добавить для устройств без поддержки viewport следующее:

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

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

Заключение

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree