Pointer события

в 10:09, , рубрики: javascript, Веб-разработка, метки:

В каждой избушке — свои игрушки

До некоторого момента front-end разработчик при написания javascript кода, рассчитанного на взаимодействие с пользователем, ориентировался лишь на «мышиные» события. Затем появились различные устройства, которые использовали другие формы взаимодействия пользователя с приложением — сенсоры или перо. Типы событий для каждого устройства были предложены индивидуальные. Так, кроме mousedown, mousemove итд., появились touchstart, touchmove и другие события.

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

  • События мыши возникают только после сенсорных;
  • Наведение мышью (mouseover) и другие аналогичные события не сработают без прикосновения к устройству. Обработчики таких событий должны быть запущены по умолчанию или их нужно заменить на событие 'click' по элементу;
  • События по щелчку не будут запущены при изменении DOM дерева документа;
  • События по щелчку срабатывают не сразу, а, приблизительно, через 300 мс;
  • Touch и mouse события, в некоторых случаях, конфликтуют между собой.

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

Муж и жена — одна сатана

Еще в сентябре 2012 года компания Microsoft преподносит следующую идею: конечный разработчик не должен задумываться о том с каким интерфейсом работает пользователь, щелкает ли он мышкой, нажимает пальцем или стилусом. В результате в Internet Explorer 10.0 появляются так называемые pointer-события (MSPointerDown, MSPointerMove итд), которые призваны одинаково работать на всех устройствах. Данный вид событий в этом браузере имеет префикс MS и, соответственно, в других браузерах не работает.

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

Объект pointer-события предоставляет дополнительные свойства, которые помогают определить тип взаимодействия пользователя с приложением (мышь, прикосновение, стилус), геометрию области сенсорного контакта пользователя с устройством, давление и наклон пера. При желании разработчик может написать уникальный код для каждого устройства ввода.

Еще одно большое преимущество точечных событий заключается в том, что они поддерживают наведение (over и out события). На данный момент большинство устройств с сенсорным вводом имеют аппаратное ограничение, которое не позволяет отслеживать данные события. Тем не менее, в 2012 году Sony анонсировала первый мобильный телефон с «Floating Touch» (плавающей сенсорной технологией), которая позволяет управлять устройством на расстоянии, подведя палец к экрану — Sony Xperia Sola. Таким образом, точечные события обеспечивают чистое решение не только для разработчиков, но и для производителей.

Идея была принята консорциумом WWW, в результате чего был разработан стандарт Pointer events, который на момент написания статьи имеет статус «кандидат в рекомендации». Это не означает, что члены W3C одобрили данную концепцию, проект может быть заменен, признан устаревшим в любое время. Тем не менее, документ находится в стадии разработки, данный вид событий имеет большие шансы на дальнейшее существование, несмотря на то, что сейчас поддерживается только в Internet Explorer 11 (в Internet Explorer 10.0 и в IE Mobile 10.0 с префиксом); Firefox 27.0, Chrome 33.0, Safari 6.0, Opera 18.0, IOS Safari 7.0, Opera Mini 7.0 Android Browser 4.4 данный вид событий пока не поддерживают даже с префиксом.

Для энтузиастов и для тех, кто сомневается в возможности кроссбраузерно применять pointer события в недалеком будущем, MS Open Tech (подконтрольная компания Microsoft) в декабре 2012 года анонсировала прототип Pointer Events для движка WebKit. Скачать прототип, а так же ознакомиться с документацией можно на сайте http://www.html5labs.com

Бери быка за рога

Для разработчиков кроссбраузерных и кроссплатформенных приложений существует несколько плагинов с помощью которых можно использовать pointer-события уже сейчас. Например, плагин hand.js, который размещен на CodePlex. Он поддерживает практически все точечные события во всех современных браузерах. Internet Explorer поддерживается начиная с 9-ой версии. Для тех, кто ориентируется на IE8 и ниже — все-таки придется писать дополнительный код.

Библиотеку pointerevents на данный момент рассматривать не будем, поскольку Internet Explorer поддерживается в ней, начиная с 10-ой версии, что для российской части интернета пока недостаточно.

Отдельно стоит упомянуть JQuery библиотеку, разработчики которой считают, что модель pointer-событий проще в использовании и более перспективная. На данный момент точечные события не поддерживаются напрямую в JQuery, но, конечно же, существует плагин jQuery PointerEvents, который призван исправить этот недостаток.

Как видите, pointer-события можно применять уже сегодня. И, вполне вероятно, через несколько лет мышиные события уйдут в прошлое…

Автор: webix

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js