跳转到主要内容

Element: pointercancel event

{{APIRef("Pointer Events")}}

The pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the {{domxref("Element/pointerdown_event", "pointerdown")}}pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.

Some examples of situations that will trigger a pointercancel event:

  • A hardware event occurs that cancels the pointer activities. This may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device.
  • The device's screen orientation is changed while the pointer is active.
  • The browser decides that the user started pointer input accidentally. This can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events.
  • The {{cssxref("touch-action")}}action CSS property prevents the input from continuing.
  • When the user interacts with too many simultaneous pointers, the browser can fire this event for all existing pointers (even if the user is still touching the screen).

[!NOTE]NOTE: After the pointercancel event is fired, the browser will also send {{domxref("Element/pointerout_event", "pointerout")}}pointerout followed by {{domxref("Element/pointerleave_event", "pointerleave")}}pointerleave.

Syntax

Use the event name in {{domxref("EventTarget/addEventListener", "addEventListener()")}}:

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

Alternatively, assign to the event handler property of the interface:

onpointercancel = (event) => { }

Event type

A {{domxref("PointerEvent")}}PointerEvent. Inherits from {{domxref("Event")}}Event.

{{InheritanceDiagram("PointerEvent")}}

Examples

Using addEventListener():

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

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

Using the onpointercancel event handler property (but note that this replaces other event listeners added using onpointercancel, if any):

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

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also