PointerEvent

Базовая Широко доступная *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

Интерфейс PointerEvent представляет состояние события DOM, созданного указателем, такого как геометрия точки контакта, тип устройства, сгенерировавшего событие, величина давления, приложенного к поверхности контакта и т.д.

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

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

Конструкторы

PointerEvent(): Создаёт синтетическое — и недоверенное — PointerEvent.

Свойства экземпляра

Этот интерфейс наследует свойства от MouseEvent и Event.

PointerEvent.altitudeAngle Только для чтения: Представляет угол между осью преобразователя (указателя или стилуса) и плоскостью X-Y экрана устройства.
PointerEvent.azimuthAngle Только для чтения: Представляет угол между плоскостью Y-Z и плоскостью, содержащей как ось преобразователя (указателя или стилуса), так и ось Y.
PointerEvent.persistentDeviceId Только для чтения Экспериментально: Уникальный идентификатор устройства указания, генерирующего PointerEvent.
PointerEvent.pointerId Только для чтения: Уникальный идентификатор указателя, вызвавшего событие.
PointerEvent.width Только для чтения: Ширина (величина по оси X) в пикселях CSS геометрии контакта указателя.
PointerEvent.height Только для чтения: Высота (величина по оси Y) в пикселях CSS геометрии контакта указателя.
PointerEvent.pressure Только для чтения: Нормализованное давление ввода указателя в диапазоне 0 до 1, где 0 и 1 соответственно минимальное и максимальное давление, которое способно обнаружить оборудование.
PointerEvent.tangentialPressure Только для чтения: Нормализованное касательное давление ввода указателя (также известное как боковое давление или цилиндрическое напряжение) в диапазоне -1 до 1, где 0 — нейтральное положение управления.
PointerEvent.tiltX Только для чтения: Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью Y–Z и плоскостью, содержащей ось указателя (например, стилуса пера) и ось Y.
PointerEvent.tiltY Только для чтения: Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью X–Z и плоскостью, содержащей ось указателя (например, стилуса пера) и ось X.
PointerEvent.twist Только для чтения: Поворот указателя (например, стилуса пера) по часовой стрелке вокруг его главной оси в градусах, со значением в диапазоне 0 до 359.
PointerEvent.pointerType Только для чтения: Указывает тип устройства, вызвавшего событие (мышь, перо, сенсорный ввод и т.д.).
PointerEvent.isPrimary Только для чтения: Указывает, представляет ли указатель основной указатель данного типа указателя.

Методы экземпляра

PointerEvent.getCoalescedEvents() Безопасный контекст: Возвращает последовательность всех PointerEvent экземпляров, которые были объединены в событие pointermove, отправленное на обработку.
PointerEvent.getPredictedEvents(): Возвращает последовательность PointerEvent экземпляров, которые браузер прогнозирует после отправленного на обработку объединённого события pointermove.

Типы событий указателя

Интерфейс PointerEvent имеет несколько типов событий. Чтобы определить, какое событие произошло, обратитесь к свойству type события.

Примечание: Важно отметить, что во многих случаях отправляются и события pointer, и события mouse (чтобы код, не специфичный для pointer, всё ещё мог взаимодействовать с пользователем). Если вы используете события pointer, вы должны вызвать preventDefault(), чтобы предотвратить отправку события mouse.

pointerover: Это событие срабатывает, когда указательное устройство перемещается в границы области проверки элемента.
pointerenter: Это событие срабатывает, когда указательное устройство перемещается в границы области проверки элемента или одного из его потомков, в том числе в результате события pointerdown от устройства, которое не поддерживает hover (см. pointerdown). Этот тип события похож на pointerover, но отличается тем, что не распространяется вверх по дереву DOM.
pointerdown: Событие срабатывает, когда указатель становится активным. Для мыши оно срабатывает, когда устройство переходит от состояния без нажатых кнопок к состоянию с нажатой хотя бы одной кнопкой. Для сенсорного экрана оно срабатывает, когда происходит физический контакт с дигитайзером. Для пера оно срабатывает, когда стилус делает физический контакт с дигитайзером.

Примечание: Для браузеров сенсорного ввода, которые поддерживают прямое управление, событие pointerdown запускает явную захват указателя, что заставляет целевой элемент захватить все последующие события указателя, как если бы они происходили над захватывающим элементом. Соответственно, pointerover, pointerenter, pointerleave, и pointerout не будут срабатывать, пока этот захват установлен. Захват можно отключить вручную, вызвав element.releasePointerCapture на целевом элементе, или он будет неявно отключен после события pointerup или pointercancel.
pointermove: Это событие срабатывает, когда указатель меняет координаты.
pointerrawupdate Экспериментально: Это событие срабатывает, когда изменяются какие-либо свойства указателя.
pointerup: Это событие срабатывает, когда указатель больше не активен.
pointercancel: Браузер вызывает это событие, если приходит к выводу, что указатель больше не сможет генерировать события (например, связанное устройство деактивировано).
pointerout: Это событие срабатывает по нескольким причинам, включая: указательное устройство перемещается за пределы области проверки элемента; срабатывание события pointerup для устройства, которое не поддерживает hover (см. pointerup); после срабатывания события pointercancel (см. pointercancel); когда стилус пера покидает область наведения, определяемую дигитайзером.
pointerleave: Это событие срабатывает, когда указательное устройство перемещается за пределы области проверки элемента. Для устройств с пером это событие срабатывает, когда стилус покидает область наведения, определяемую дигитайзером.
gotpointercapture: Это событие срабатывает, когда элемент получает захват указателя.
lostpointercapture: Это событие срабатывает после отпуска захвата указателя для указателя.

Пример

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

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

Спецификация
Pointer Events # pointerevent-interface

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

	Настольный					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`PointerEvent`	55	12	59	42	13	55	79	42	13	6.0	55
`PointerEvent`	55	12	59	42	13	55	79	42	13	6.0	55
`altitudeAngle`	86	86	131	72	18.2	86	131	61	18.2	14.0	86
`azimuthAngle`	86	86	131	72	18.2	86	131	61	18.2	14.0	86
`getCoalescedEvents`	58	79	59	45	18.2	58	79 Метод всегда возвращает пустой массив, независимо от действий пользователя.	43	18.2	7.0	58
`getPredictedEvents`	77	79	89	64	18.2	77	89	55	18.2	12.0	77
`height`	55	12	59	42	13	55	79	42	13	6.0	55
`isPrimary`	55	12	59	42	13	55	79	42	13	6.0	55
`persistentDeviceId`	128	128	Нет	114	Нет	128	Нет	85	Нет	Нет	128
`pointerId`	55	12	59	42	13	55	79	42	13	6.0	55
`pointerType`	55	12	59	42	13	55	79	42	13	6.0	55
`pressure`	55	12	59	42	13	55	79	42	13	6.0	55
`tangentialPressure`	57	79	59	44	13	57	79	43	13	7.0	57
`tiltX`	55	12	59	42	13	55	79	42	13	6.0	55
`tiltY`	55	12	59	42	13	55	79	42	13	6.0	55
`twist`	57	18	59	44	13	57	79	43	13	7.0	57
`width`	55	12	59	42	13	55	79	42	13	6.0	55

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent