Отвечая на действия пользователя, возможно, суть того, что мы делаем как разработчики интерфейса.
Для того чтобы построить отзывчивые веб-продуктов, понимание того, как прикосновение, мышь, указатель и действия клавиатуры и работа браузера вместе является ключевым фактором.Вы, вероятно испытал 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
Когда пользователь вводит элемент на мобильном устройстве, браузер запускает убил событий.Это действие, как правило, срабатывает целый ряд мероприятий, таких как: touchstart → touchend → mouseover → mousemove → mousedown → mouseup → click .
Это связано с обратной совместимости с Интернета.Указатели событий принять альтернативный подход, выпустив события совместимости встроенный: mousemove → pointerover → mouseover → pointerdown → mousedown → gotpointercapture → pointerup → mouseup→ lostpointercapture → pointerout → mouseout → focus → click .
Описание событий позволяет ПА отличаются по их реализации мероприятий совместимости.Патрик Lauke и Питер-Поль Кох поддерживать обширный справочный материал по этой теме, которая связана в разделе ресурсов на нижней части этой статьи .
Следующие графики показывают каскад событий для следующих действий:
- Начальная Нажмите на элемент,
- Вторая нажмите на элемент,
- Отвода элемент .
Пожалуйста, обратите внимание: стек Это событие намеренно игнорирует, где focus и blur события вписываются в эту стопку .
10 
13 
16 Применение событие 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 случае, мы должны связать все события, которые будут необходимы для завершения этого действия.Когда взаимодействие завершается, мы тогда должны убрать за собой по отменяя все, но, начиная событие .
Вы, разработчик сайте, являются единственным знаю, стоит ли масштабирования страницы или имеет другое событие двойного нажатия должны ждать.Если — и только тогда — Вы требуете обратного вызова, которая задерживается должны вы позволяете задержку предполагаемого действия .
В ссылке, вы найдете небольшой, зависимость без крана демо, чтобы проиллюстрировать усилия, необходимые для создания мульти-ввода, с малой задержкой случае, если из-под крана.Полимер-жесты, готовое ТКП и других мероприятий.Несмотря на свое название, он не привязан к библиотеке полимера в любом случае, и может быть легко использована в изоляции .
Что …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров