Браузер входных событий: мы можем сделать лучше, чем клик?

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

Для того чтобы построить отзывчивые веб-продуктов, понимание того, как прикосновение, мышь, указатель и действия клавиатуры и работа браузера вместе является ключевым фактором.Вы, вероятно испытал 300 миллисекунд delay 1 в мобильных браузерах или боролся с touchmove 2 против scrolling 3 .

В этой статье мы познакомим каскад событий и использовать эти знания для реализации демо-версию случае водопроводной, которая поддерживает множество методов ввода, а не взлома прокси браузеров, таких как Opera Mini .

Overview

Три основных способа ввода используется для взаимодействия с сегодняшнего сети: цифровые указатели (мыши), тактильные (Direct Touch или стилус) и клавишных.У нас есть доступ к ним в JavaScript через сенсорным events 4 , мышь events 5 , Указатель events 6 и клавиатура events 7 .В этой статье мы в основном касаются сенсорный и мыши основе взаимодействия, хотя некоторые события имеют стандартные клавиатуры на основе взаимодействия, такие как click и submit события .

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

/** DO NOT EVER DO THIS! */
$('a', ('ontouchstart' in window) ? 'touchend' : 'click', handler);

Microsoft привело платить, чтобы создать лучшее, на будущее перед событийную модель с “события указателя” спецификации.События указатели представляют абстрактные вход механизм, который в настоящее время рекомендации W3C.Указатели событий дают агент пользователя (UA) гибкость для размещения множество механизмов ввода под одной системе событий.Мышь, сенсорный и стилус все примеры, которые легко приходят на ум сегодня, хотя реализация распространяется на Myo 8 или Ring 9 являются вообразить.В то время как веб-Разработчики, похоже, в восторге от этого, не все инженеры браузеров чувствовал то же самое.А именно, Apple и Google решили не реализовывать указатели событий в это время .

Решение компании Google не обязательно финал, но там нет активной работы, проводимой на указатели событий.Наш вклад и использование указатели событий через polyfills и альтернативных решений будет частью уравнения, которые могли бы в конечном итоге склонить чашу весов в другую сторону.Apple, сделал свое заявление против указатели событий в 2012 году, и я не знаю ни одного более общественный резонанс от инженеров Сафари .

Event Cascade

Когда пользователь вводит элемент на мобильном устройстве, браузер запускает убил событий.Это действие, как правило, срабатывает целый ряд мероприятий, таких как: touchstarttouchendmouseovermousemovemousedownmouseupclick .

Это связано с обратной совместимости с Интернета.Указатели событий принять альтернативный подход, выпустив события совместимости встроенный: mousemovepointerovermouseoverpointerdownmousedowngotpointercapturepointerupmouseuplostpointercapturepointeroutmouseoutfocusclick .

Описание событий позволяет ПА отличаются по их реализации мероприятий совместимости.Патрик Lauke и Питер-Поль Кох поддерживать обширный справочный материал по этой теме, которая связана в разделе ресурсов на нижней части этой статьи .

Следующие графики показывают каскад событий для следующих действий:

  1. Начальная Нажмите на элемент,
  2. Вторая нажмите на элемент,
  3. Отвода элемент .

Пожалуйста, обратите внимание: стек Это событие намеренно игнорирует, где focus и blur события вписываются в эту стопку .

The event cascade on iOS devices for tapping on an element twice and then tapping away 10
каскад событий на IOS устройств для отвода на элементе в два раза, а затем нажав прочь.(Изображение: Стивен Davis 17 14 11 ) ( Просмотр большой version 12 )
The event cascade on most Android 4.4 devices for tapping an element twice and then tapping away 13
каскад событий на большинстве Android 4.4 устройств для нарезания элемент дважды, а затем нажав прочь.(Изображение: Стивен Davis 17 14 11 ) ( Просмотр большой version 15 )
The event cascade on IE 11 (before compatibility touch events were implemented) for tapping an element twice and then tapping away. 16
каскад событий на Internet Explorer 11 (до сенсорных совместимость событий были реализованы) для нарезания элемент дважды, а затем нажав прочь.(Изображение: Стивен Davis 17 14 11 ) ( Просмотр большой version 18 )

Применение событие Cascade

Большинство веб-сайтов, построенных сегодня, для Desktop Web “просто работать” из-за усилий инженеров браузера.Несмотря на каскада глядя угловатый, консервативный подход построения для событий мыши, как мы ранее придется как правило, работают .

Конечно, есть улов.Печально задержка 300 мс является самым известным, но взаимодействие между прокрутки, touchmove и pointermove События, и браузер живопись дополнительные проблемы.Как избежать задержки 300 миллисекунд легко, если:

  • Мы оптимизируем только для современного Chrome для Android и настольных, которые используют эвристики, такие как <meta name="viewport" content="width=device-width"> отключить задержку;
  • Мы оптимизируем только для прошивкой, а пользователь делает четкое прессу, но не быстро крана, а не долгим нажатием — просто хороший, нормальный, четкий нажмите элемента (ох, это также зависит от ли это вUIWebView или WKWebView — читать Вопрос Fastclick находится на topic 19 для хорошего крика) .

Если наша цель заключается в создании веб-продуктов, которые конкурируют с местными платформ в пользовательский опыт и ногтей, то мы должны уменьшить задержку отклика взаимодействия.Чтобы достичь этого, мы должны строить на примитивных событий (down, move и up) и к созданию собственных композитных события (click, double-click).Конечно, мы по-прежнему необходимо включить обработчики резервные для родных мероприятий для широкой поддержке и доступности .

Не делая для этого необходимо не маленький объем кода знания.Чтобы избежать 300 мс (или любой длины) Задержка в различных браузерах, мы должны обращаться полного жизненного цикла взаимодействия самих себя.Для данного {type}down случае, мы должны связать все события, которые будут необходимы для завершения этого действия.Когда взаимодействие завершается, мы тогда должны убрать за собой по отменяя все, но, начиная событие .

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

В ссылке, вы найдете небольшой, зависимость без крана демо, чтобы проиллюстрировать усилия, необходимые для создания мульти-ввода, с малой задержкой случае, если из-под крана.Полимер-жесты, готовое ТКП и других мероприятий.Несмотря на свое название, он не привязан к библиотеке полимера в любом случае, и может быть легко использована в изоляции .

Что …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.