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

События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).

Указывающее устройство – это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.

События, необходимые для обработки общего ввода указывающих устройств, аналогичнысобытиям мыши (mousedown/pointerdown,mousemove/pointermove, и так далее.). Следовательно, типы событий указывающих устройств намеренно похожи на события мыши.

В дополнение к обычным свойствам, представленным и в событиях мыши (координаты, целевой элемент, состояния кнопок и так далее) события ввода у разных указывающих устройств содержат и уникальные свойства: степень давления, форма области контакта, наклон и так далее. На самом деле, интерфейсPointerEvent наследует все свойстваMouseEvent, облегчая так образом перенос содержимого из событий мыши в события указывающего устройства.

Терминология

Состояние активных кнопок

Ситуация, когда *указывающее устройство *имеет ненулевое значение свойстваbuttons. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.

Активное указывающее устройство

Любоеуказывающее устройство ввода, которое может производить события. Указывающее устройство считается активным, пока может производить события. Например, перо, которым коснулись экрана, считается активным, поскольку может производить дополнительные события при поднятии или перемещении.

Графический планшет (диджитайзер)

Устройство с чувствительным покрытием, которое может фиксировать контакт. Чаще всего, это устройство с сенсорным экраном, который может распознавать касания указывающего устройства, такого как перо, стилус или палец. Некоторые сенсорные устройства могут определять приближение указателя и представлять это состояние как наведение мыши.

Тест попадания (hit test)

Процесс, который браузер использует при определении целевого элемента для события указывающего устройства. Обычно заключается в сопоставлении позиции указателя и визуальной области элементов на экране.

Указатель (указывающее устройство)

Представление устройства ввода, которое может нацеливаться на определённую координату (или набор координат) на экране. Примером указателя может быть мышь, перо/стилус и прикосновение.

Захват указателя

Захват указателя позволяет событиям этого указателя быть перенаправленными на элемент, отличный обычного результата проверки попадания (hit test)

Событие указателя

Событие DOM , вызванное дляуказателя.

Интерфейсы

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

Стандарт также включает некоторые расширения для интерфейсовElement иNavigator.

Следующие подразделы содержат краткое описание каждого интерфейса и свойства.

Интерфейс PointerEvent

ИнтерфейсPointerEvent расширяет интерфейсMouseEvent и имеет следующие свойства. Все следующие свойства доступныТолько для чтения.

pointerId

Уникальный идентификатор указателя, вызвавшего событие

width

Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.

height

Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.

pressure

Степень давления указателя в диапазоне от0 до1, где0 – минимальное, а1 – максимальное значение давления, которое способно обработать устройство.

tangentialPressure

Степень тангенциального давления в диапазоне от0 до1, где0 – минимальное, а1 – максимальное значение давления, которое способно обработать устройство..

tiltX

Угол (в градуса, в диапазоне от-90 до90) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y

tiltY

Угол (в градуса, в диапазоне от-90 до90) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X

twist

Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от0 до359

pointerType

Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)

isPrimary

Указывает, является ли указывающее устройство основным для данного типа

Типы событий и Глобальные Обработчики Событий

События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (down,up,move,over,out,enter иleave).

Ниже представлено короткое описание для каждого типа события и связанныйГлобальный обработчик события.

Расширения элемента

Существует три расширения интерфейсаElement:

setPointerCapture()

Определяет определённый элемент в качестве цели захвата для будущих событий указателя.

releasePointerCapture()

Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.

Расширение навигатора

СвойствоNavigator.maxTouchPoints используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.

Примеры

Этот раздел содержит примеры базового использования интерфейсов событий указывающего устройства.

Назначение обработчиков событий

В этом примере определённому элементу назначаются обработчики каждого типа события.

<html>  <script>    function over_handler(event) {}    function enter_handler(event) {}    function down_handler(event) {}    function move_handler(event) {}    function up_handler(event) {}    function cancel_handler(event) {}    function out_handler(event) {}    function leave_handler(event) {}    function gotcapture_handler(event) {}    function lostcapture_handler(event) {}    function init() {      var el = document.getElementById("target");      // Register pointer event handlers      el.onpointerover = over_handler;      el.onpointerenter = enter_handler;      el.onpointerdown = down_handler;      el.onpointermove = move_handler;      el.onpointerup = up_handler;      el.onpointercancel = cancel_handler;      el.onpointerout = out_handler;      el.onpointerleave = leave_handler;      el.gotpointercapture = gotcapture_handler;      el.lostpointercapture = lostcapture_handler;    }  </script>  <body onload="init();">    <div>Touch me ...</div>  </body></html>

Свойства события

Этот пример демонстрирует доступ ко всем свойствам события касания.

<html>  <script>    var id = -1;    function process_id(event) {      // Обработка этого события на основе идентификатора события    }    function process_mouse(event) {      // Обработка события мыши    }    function process_pen(event) {      // Обработка события пера    }    function process_touch(event) {      // Обработка события касания    }    function process_tilt(tiltX, tiltY) {      // Обработчик данных наклона    }    function process_pressure(pressure) {      // Обработчик давления    }    function process_non_primary(event) {      // Не основной обработчик    }    function down_handler(ev) {      // Вычислить область контакта точки касания      var area = ev.width * ev.height;      // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать      if (id == ev.identifier) process_id(ev);      // Вызвать обработчик нужного типа указателя      switch (ev.pointerType) {        case "mouse":          process_mouse(ev);          break;        case "pen":          process_pen(ev);          break;        case "touch":          process_touch(ev);          break;        default:          console.log("pointerType " + ev.pointerType + " is Not suported");      }      // Вызвать обработчик наклона      if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);      // Вызвать обработчик давления      process_pressure(ev.pressure);      // Если это события не является основным, то вызвать не основной обработчик      if (!ev.isPrimary) process_non_primary(ev);    }    function init() {      var el = document.getElementById("target");      // Назначение обработчика события "pointerdown"      el.onpointerdown = down_handler;    }  </script>  <body onload="init();">    <div>Touch me ...</div>  </body></html>

Определение Основного Указателя

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

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

Определение состояний кнопок

Некоторые указывающие устройства, такие как мышь или перо, поддерживают несколько кнопок, и эти кнопки могут нажиматься одновременно. Например, нажатие кнопки, когда другая кнопка на устройстве уже нажата.

Для определения состояния нажатия кнопки, события указателя используют свойстваbutton иbuttons интерфейсаMouseEvent, от которого наследуется отPointerEvent.

В следующей таблице приведены значенияbutton иbuttons для различных состояний кнопок устройства.

Pointer capture

Pointer capture allows events for a particularpointer event to be re-targeted to a particular element instead of the normalhit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).

The following example shows pointer capture being set on an element.

<html>  <script>    function downHandler(ev) {      let el = document.getElementById("target");      // Element 'target' will receive/capture further events      el.setPointerCapture(ev.pointerId);    }    function init() {      let el = document.getElementById("target");      el.onpointerdown = downHandler;    }  </script>  <body onload="init();">    <div>Touch me ...</div>  </body></html>

The following example shows a pointer capture being released (when apointercancel event occurs. The browser does this automatically when apointerup orpointercancel event occurs.

<html>  <script>    function downHandler(ev) {      let el = document.getElementById("target");      // Element "target" will receive/capture further events      el.setPointerCapture(ev.pointerId);    }    function cancelHandler(ev) {      let el = document.getElementById("target");      // Release the pointer capture      el.releasePointerCapture(ev.pointerId);    }    function init() {      let el = document.getElementById("target");      // Register pointerdown and pointercancel handlers      el.onpointerdown = downHandler;      el.onpointercancel = cancelHandler;    }  </script>  <body onload="init();">    <div>Touch me ...</div>  </body></html>

touch-action CSS property

Thetouch-action CSS property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

A value ofauto means the browser is free to apply its default touch behavior (to the specified region) and the value ofnone disables the browser's default touch behavior for the region. The valuespan-x andpan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The valuemanipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.

In the following example, the browser's default touch behavior is disabled for thediv element.

<html>  <body>    <div>Can't touch this ...</div>  </body></html>

In the following example, default touch behavior is disabled for somebutton elements.

button#tiny {  touch-action: none;}

In the following example, when thetarget element is touched, it will only pan in the horizontal direction.

#target {  touch-action: pan-x;}

Compatibility with mouse events

Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.

The browsermay map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is calledcompatibility mouse events. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:

• Mouse events can only be prevented when the pointer is down.
• Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.
• Themouseover,mouseout,mouseenter, andmouseleave events are never prevented (even if the pointer is down).

Best practices

Here are somebest practices to consider when using pointer events:

• Minimize the amount of work performed in event handlers.
• Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).
• The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.

Спецификации

Совместимость с браузерами

Demos and examples

• Touch/pointer tests and demos (by Patrick H. Lauke)

Community

• Pointer Events Working Group
• Mail list
• W3C #pointerevents IRC channel

Related topics and resources

• Touch Events Standard