PointerEvent - 表示由指针产生的 DOM 事件的状态

PointerEvent 接口表示由指针产生的 DOM 事件的状态，例如接触点的几何形状，生成事件的设备类型，施加在接触面上的压力大小等。

指针是输入设备（例如可触摸表面上的鼠标，笔或接触点）硬件层抽象。指针可以指向屏幕等接触表面上的特定坐标（或一组坐标）。

指针的命中测试是浏览器用来确定指针事件的目标元素的过程。通常，这是通过考虑指针的位置以及屏幕媒体上文档中元素的视觉布局来确定的。

构造函数

`PointerEvent()`

创建一个合成且不受信任的 PointerEvent。

属性

该接口继承了 MouseEvent 和 Event 的属性。

`PointerEvent.pointerId` 只读

触发事件的指针的唯一标识符。

`PointerEvent.width` 只读

指针的接触几何形状的宽度（X 轴上的幅度），以 CSS 像素为单位。

`PointerEvent.height` 只读

指针的接触几何形状的高度（Y 轴上的幅度），以 CSS 像素为单位。

`PointerEvent.pressure` 只读

指针输入的归一化压力在 0 到 1 的范围内，其中 0 和 1 分别表示硬件能够检测到的最小和最大压力。

`PointerEvent.tangentialPressure` 只读

指针输入的标准化切向压力（也称为机筒压力或气缸压力）在 -1 至 1 的范围内，其中 0 是控件的中立位置。

`PointerEvent.tiltX` 只读

YZ 平面与包含指针（例如笔针）轴和 Y 轴的平面之间的平面角度（以度为单位，在 -90 到 90 之间）。

`PointerEvent.tiltY` 只读

XZ 平面与包含指针（例如笔针）轴和 X 轴的平面之间的平面角度（以度为单位，在 -90 到 90 之间）。

`PointerEvent.twist` 只读

指针（例如笔针）围绕其主轴的顺时针旋转（以度为单位），取值范围为 0 到 359。

`PointerEvent.pointerType` 只读

指示触发事件的设备类型（鼠标，笔，触摸等）

`PointerEvent.isPrimary` 只读

指示指针是否为此指针类型的主指针。

方法

`PointerEvent.getCoalescedEvents()`

返回已合并到调度的 pointermove 事件中的所有 PointerEvent 实例的序列。

指针事件类型

PointerEvent 接口具有几种事件类型。要确定触发哪个事件，请查看事件的 type 属性。

注意： 需要注意的是，在许多情况下，指针和鼠标事件会一起触发（为了让非指针特定的代码仍与用户交互）。如果只使用指针事件，则应调用 event.preventDefault()，以防止鼠标事件也被发送。

`pointerover`

将定点设备移至元素的点击测试边界时，将触发此事件。

`pointerenter`

当将指针设备移动到元素或其子孙之一的命中测试边界时，会触发此事件，包括由于不支持悬停的设备发出的指标下降事件（请参见 pointerdown）。此事件类型与指针切换类似，但不同之处在于它不会冒泡。

`pointerdown`

当指针变为 active 时将触发该事件。对于鼠标，当设备从没有按下的按钮过渡到至少按下的一个按钮时会触发。对于触摸，当与数字转换器进行物理接触时会触发。对于笔，当手写笔与数字转换器物理接触时会触发。

`pointermove`

指针更改坐标时将触发此事件。

`pointerup`

当指针不再处于 active 状态时，将触发此事件。

`pointercancel`

如果浏览器断定指针将不再能够生成事件（例如，相关设备已停用），则会触发该事件。

`pointerout`

触发此事件的原因有几个，其中包括：将指针设备移出元素的命中测试边界；为不支持悬停的设备触发指标事件（请参见 pointerup）；触发 pointercancel 事件后（请参见 pointercancel）；当笔针离开悬停范围时，可由数字化仪检测到。

`pointerleave`

将定点设备移出元素的点击测试边界时，将触发此事件。对于笔式设备，当手写笔离开数字化仪可检测到的悬停范围时，将触发此事件。

`gotpointercapture`

当元素接收指针捕获时将触发此事件。

`lostpointercapture`

释放指针的指针捕获后，将触发此事件。

全局事件处理程序

`GlobalEventHandlers.onpointerover`

pointerover 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointerenter`

pointerenter 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointerdown`

pointerdown 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointermove`

pointermove 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointerup`

pointerup 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointercancel`

pointercancel 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointerout`

pointerout 事件的全局事件处理程序事件。

`GlobalEventHandlers.onpointerleave`

pointerleave 事件的全局事件处理程序事件。

实例

每个属性，事件类型和全局事件处理程序的实例都包含在它们各自的参考页中。

规范

规范	状态	备注
Pointer Events – Level 3 PointerEvent 的定义	编者的草案	最新草稿。
Pointer Events – Level 2 PointerEvent 的定义	推荐	增加了 `twist` 和 `tangentialPressure` 属性。
Pointer Events PointerEvent 的定义	已过时	初始定义。

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	55	12	59 41	11 10 MS ¹	42	13
`PointerEvent()` 构造函数	55	12	59 41	11 10 MS ¹	42	13
`getCoalescedEvents`	58	不支持	59	不支持	45	不支持
`height`	55	12	59 41	11 10²	42	13
`isPrimary`	55	12	59 41	10	42	13
`pointerId`	55	12	59 41	10	42	13
`pointerType`	55	12	59 41	11 10³	42	13
`pressure`	55	12	59 41	11 10⁴	42	13
`tangentialPressure`	58	不支持	59 54	不支持	45	13
`tiltX`	55	12	59 41	10	42	13
`tiltY`	55	12	59 41	10	42	13
`twist`	58	18	59 54	不支持	45	13
`width`	55	12	59 41	11 10²	42	13

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	55	55	未知	41	未知	42	13
`PointerEvent()` 构造函数	55	55	未知	41	未知	42	13
`getCoalescedEvents`	58	58	未知	59	未知	43	不支持
`height`	55	55	未知	41	未知	42	13
`isPrimary`	55	55	未知	41	未知	42	13
`pointerId`	55	55	未知	41	未知	42	13
`pointerType`	55	55	未知	41	未知	42	13
`pressure`	55	55	未知	41	未知	42	13
`tangentialPressure`	58	58	未知	54	未知	43	13
`tiltX`	55	55	未知	41	未知	42	13
`tiltY`	55	55	未知	41	未知	42	13
`twist`	58	58	未知	54	未知	43	13
`width`	55	55	未知	41	未知	42	13

1. 请参阅 MSDN Pointer 事件更新。

2. 返回以屏幕像素而不是 CSS 文档像素为单位的值。

3. 返回整数枚举而不是字符串。

4. 在不支持压力的硬件上返回 0 而不是 0.5。

相关链接

触摸事件
GestureEvent
MSGestureEvent
touch-action