- PVSM.RU - https://www.pvsm.ru -

Pointer события

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

До некоторого момента 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-события предоставляет дополнительные свойства [1], которые помогают определить тип взаимодействия пользователя с приложением (мышь, прикосновение, стилус), геометрию области сенсорного контакта пользователя с устройством, давление и наклон пера. При желании разработчик может написать уникальный код для каждого устройства ввода.

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

Идея была принята консорциумом WWW, в результате чего был разработан стандарт Pointer events [3], который на момент написания статьи имеет статус «кандидат в рекомендации». Это не означает, что члены 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 [4]

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

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

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

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

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

Автор: webix

Источник [9]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/49185

Ссылки в тексте:

[1] дополнительные свойства: http://webix.pro/javascript/uchebnik/pointer-events.html#svojstva

[2] «Floating Touch»: http://www.youtube.com/watch?v=9Q73bHn9xus

[3] стандарт Pointer events: http://www.w3.org/TR/pointerevents/

[4] http://www.html5labs.com: http://www.html5labs.com/prototypes/pointer-events-for-webkit/pointer-events-for-webkit/info

[5] hand.js: http://handjs.codeplex.com/

[6] CodePlex: http://ru.wikipedia.org/wiki/CodePlex

[7] pointerevents: https://github.com/Polymer/PointerEvents

[8] jQuery PointerEvents: http://plugins.jquery.com/pointerevents/

[9] Источник: http://habrahabr.ru/post/203514/