Element:pointercancel 事件

Baseline 已广泛支持

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

当浏览器确定不太可能再有更多的指针事件发生,或者在 pointerdown 事件触发后,指针被用于通过平移、缩放或滚动来操作视口时,会触发 pointercancel 事件。

一些会触发 pointercancel 事件的情况示例:

  • 发生取消指针活动的硬件事件。例如,用户通过应用程序切换界面或移动设备上的“主页”按钮切换应用程序。
  • 当指针活动时,设备屏幕方向发生改变。
  • 浏览器判定用户意外启动了指针输入。例如,如果硬件支持手掌误触消除,以防止在使用手写笔时将手放在显示屏上意外触发事件。
  • touch-action CSS 属性阻止输入继续。
  • 当用户同时使用过多的指针进行交互时,浏览器可能会为所有现有指针触发此事件(即使用户仍然触摸屏幕)。

注意:pointercancel 事件触发后,浏览器还会发送 pointerout,然后是 pointerleave

语法

在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。

js
addEventListener("pointercancel", (event) => { })

onpointercancel = (event) => { }

事件类型

一个 PointerEvent。继承自 Event

Event UIEvent MouseEvent 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 只读

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

示例

使用 addEventListener()

js
const para = document.querySelector("p");

para.addEventListener("pointercancel", (event) => {
  console.log("Pointer event cancelled");
});

使用 onpointercancel 事件处理程序属性

js
const para = document.querySelector("p");

para.onpointercancel = (event) => {
  console.log("Pointer event cancelled");
};

规范

规范
指针事件
# the-pointercancel-event
指针事件
# dom-globaleventhandlers-onpointercancel

浏览器兼容性

另见