В каждой избушке — свои игрушки
До некоторого момента 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
