此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Element:pointercancel 事件

基线
广泛可用

自 2020年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

pointercancel 事件会在浏览器判断可能不再会有指针事件发生,或者在触发 pointerdown 事件后指针被用于平移、缩放或滚动来操作视口时触发。

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

  • 发生了取消指针活动的硬件事件。包括用户使用应用切换界面或移动设备上的“home”键切换了应用程序。
  • 设备的屏幕方向在指针活动期间发生了改变。
  • 浏览器认为用户的指针输入始于意外。例如,设备支持防手掌误触功能以防止用户使用触控笔时手倚靠在屏幕上而意外触发事件。
  • CSS touch-action 属性打断了继续输入。
  • 用户同时使用了太多指针进行交互,浏览器会在现有全部指针上触发此事件(即使用户仍在触摸屏幕)。

备注:在触发 pointercancel 事件后,浏览器也会发送 pointerout 事件,接着再发送 pointerleave 事件。

语法

在 addEventListener() 中使用此事件名称:

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

或者,对接口的事件处理器属性赋值:

js
onpointercancel = (event) => { }

事件类型

PointerEvent。继承自 Event。

Event UIEvent MouseEvent PointerEvent

示例

使用 addEventListener():

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

para.addEventListener("pointercancel", (event) => {
  console.log("指针事件取消了");
});

使用 onpointercancel 事件处理器属性(但请注意,这会替换掉之前使用 onpointercancel 添加的其他事件监听器,如存在的话):

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

para.onpointercancel = (event) => {
  console.log("指针事件取消了");
};

规范

规范
Pointer Events
# pointercancel
Pointer Events
# dom-globaleventhandlers-onpointercancel

浏览器兼容性

参见