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

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

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

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

Overview

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

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

/** 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 году, и я не знаю ни одного более общественный резонанс от инженеров Сафари .

Событие 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

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

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

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

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

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

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

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

Чтобы было ясно, …

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

Comments are closed.