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

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

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

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

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

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

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

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

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

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

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

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

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

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

Событие (en-US) DOM , вызванное для указателя.

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

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

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

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

pointerId (en-US)

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

width (en-US)

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

height (en-US)

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

pressure (en-US)

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

tangentialPressure (en-US)

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

tiltX (en-US)

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

tiltY (en-US)

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

twist (en-US)

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

pointerType (en-US)

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

isPrimary (en-US)

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

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

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

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

setPointerCapture() (en-US)

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

releasePointerCapture() (en-US)

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

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

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

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

<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 id="target">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 id="target">Touch me ...</div>
  </body>
</html>

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

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

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

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

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

Pointer capture allows events for a particular pointer event (en-US) to be re-targeted to a particular element instead of the normal hit 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 id="target">Touch me ...</div>
  </body>
</html>

The following example shows a pointer capture being released (when a pointercancel event occurs. The browser does this automatically when a pointerup or pointercancel 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 id="target">Touch me ...</div>
  </body>
</html>

The touch-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 of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. The values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value manipulation 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 the div element.

<html>
  <body>
    <div style="touch-action:none;">Can't touch this ...</div>
  </body>
</html>

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

button#tiny {
  touch-action: none;
}

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

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

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 browser may map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is called compatibility 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.
• The mouseover, mouseout, mouseenter, and mouseleave events are never prevented (even if the pointer is down).

Here are some best 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.

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

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

• Touch Events Standard