PointerEvent

Baseline 广泛可用 *

此特性已经十分成熟,可在许多设备和浏览器版本上使用。自 2020 年 7 月以来,它已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

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

指针 是输入设备(如鼠标、笔或触摸屏上的接触点)的硬件无关表示。指针可以指向接触表面上的特定坐标(或一组坐标),例如屏幕。

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

Event UIEvent MouseEvent PointerEvent

构造函数

PointerEvent()

创建一个合成的、不可信的 PointerEvent

实例属性

此接口继承自 MouseEventEvent 的属性。

PointerEvent.altitudeAngle 只读

表示传感器(指针或手写笔)轴与设备屏幕的 X-Y 平面之间的角度。

PointerEvent.azimuthAngle 只读

表示 Y-Z 平面与包含传感器(指针或手写笔)轴和 Y 轴的平面之间的角度。

PointerEvent.persistentDeviceId 只读

生成 PointerEvent 的指向设备的唯一标识符。

PointerEvent.pointerId 只读

导致事件的指针的唯一标识符。

PointerEvent.width 只读

指针接触几何的宽度(X 轴上的大小),以 CSS 像素为单位。

PointerEvent.height 只读

指针接触几何的高度(Y 轴上的大小),单位为 CSS 像素。

PointerEvent.pressure 只读

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

PointerEvent.tangentialPressure 只读

指针输入(也称为筒压或圆柱应力)在 -11 范围内的归一化切向压力,其中 0 是控制的中间位置。

PointerEvent.tiltX 只读

Y-Z 平面与包含指针(例如笔手写笔)轴和 Y 轴的平面之间的平面角(以度为单位,范围为 -9090)。

PointerEvent.tiltY 只读

X–Z 平面与包含指针(例如,笔尖)轴和 X 轴的平面之间的平面角度(以度为单位,范围为 -9090)。

PointerEvent.twist 只读

指针(例如笔手写笔)围绕其主轴的顺时针旋转角度,以度为单位,值为 0359

PointerEvent.pointerType 只读

指示导致事件的设备类型(鼠标、笔、触摸等)。

PointerEvent.isPrimary 只读

指示此指针是否表示此指针类型的主要指针。

实例方法

PointerEvent.getCoalescedEvents() 安全上下文

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

PointerEvent.getPredictedEvents()

返回浏览器预测将跟随已分派的 pointermove 事件的合并事件的 PointerEvent 实例序列。

Pointer 事件类型

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

注意: 重要的是要注意,在许多情况下,会同时发送指针事件和鼠标事件(以允许非指针特定代码仍然与用户进行交互)。如果您使用指针事件,则应调用 preventDefault() 以避免也发送鼠标事件。

pointerover

当指向设备移入元素的命中测试边界时,会触发此事件。

pointerenter

当指向设备移入元素或其任何子元素的命中测试边界时,会触发此事件,包括由于不支持悬停的设备触发 pointerdown 事件(参见 pointerdown)。此事件类型类似于 pointerover,但不同之处在于它不会冒泡。

pointerdown

当指针变为活动状态时,会触发该事件。对于鼠标,当设备从未按下按钮过渡到至少按下按钮时,会触发该事件。对于触摸,当手指与数字化仪发生物理接触时,会触发该事件。对于笔,当触控笔与数字化仪发生物理接触时,会触发该事件。

注意: 对于支持直接操作的触摸屏浏览器,pointerdown 事件会触发隐式指针捕获,导致目标捕获所有后续指针事件,如同它们发生在捕获目标之上一样。因此,只要此捕获处于设置状态,pointeroverpointerenterpointerleavepointerout **将不会触发**。可以通过在目标元素上调用 element.releasePointerCapture 来手动释放捕获,或者在 pointeruppointercancel 事件后隐式释放。

pointermove

当指针坐标改变时,会触发此事件。

pointerrawupdate 实验性

当指针的任何属性发生变化时,会触发此事件。

pointerup

当指针不再活动时,会触发此事件。

pointercancel

如果浏览器认为指向设备将无法再生成事件(例如,相关设备已停用),则会触发此事件。

pointerout

此事件可能因多种原因触发,包括:指向设备移出元素的命中测试边界;为不支持悬停的设备触发 pointerup 事件(参见 pointerup);在触发 pointercancel 事件之后(参见 pointercancel);当笔触控笔离开数字化仪可检测的悬停范围时。

pointerleave

当指向设备移出元素的命中测试边界时,会触发此事件。对于笔设备,当触控笔离开数字化仪可检测的悬停范围时,会触发此事件。

gotpointercapture

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

lostpointercapture

在指针的指针捕获被释放后,会触发此事件。

示例

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

规范

规范
指针事件
# pointerevent-interface

浏览器兼容性

另见