JavaScript Element pointercancel Event

What You’ll Learn

The pointercancel event fires when the browser cancels an active pointer. Learn addEventListener vs onpointercancel, common cancel causes, the follow-up pointerout / pointerleave sequence, gesture cleanup, and five try-it labs.

Introduction

Not every pointer session ends with a clean pointerup. The OS or browser may steal the gesture—home button, app switcher, orientation change, palm rejection, viewport pan/zoom, or touch-action scrolling.

pointercancel is the signal: “This pointer will not continue.” Abort drag/draw state immediately so your UI does not stay stuck in a pressed or dragging mode.

Understanding pointercancel

An instance event that answers: “Did the browser cancel this pointer?”

• Fires when more pointer events are unlikely, or the pointer starts panning/zooming/scrolling the viewport after pointerdown.
• PointerEvent — pointerId, pointerType, isPrimary, and more.
• Handler — onpointercancel or addEventListener("pointercancel", ...).
• Follow-up — pointerout then pointerleave.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

onpointercancel = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

⚡ When pointercancel Fires

MDN lists common situations that can trigger it:

• Hardware / OS interrupts (app switcher, mobile Home button).
• Screen orientation changes while the pointer is active.
• Accidental input detection (for example palm rejection with a stylus).
• touch-action CSS preventing the input from continuing (browser takes over for pan/zoom).
• Too many simultaneous pointers—the browser may cancel existing ones.

⚖️ pointercancel vs Related Events

Examples Gallery

Examples follow MDN Element: pointercancel event. On desktop, cancel is harder to trigger than pointerup—labs also show how to wire cleanup so you are ready when it does fire (touch devices / pan gestures).

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

para.addEventListener("pointercancel", (event) => {
  out.textContent =
    "Pointer event cancelled (id=" + event.pointerId + ")";
});

Pointer event cancelled (id=1)

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

para.onpointercancel = (event) => {
  out.textContent = "onpointercancel type=" + event.pointerType;
};

onpointercancel type=touch

const handle = document.getElementById("handle");
const out = document.getElementById("out");
let active = false;

function endSession(reason) {
  if (!active) return;
  active = false;
  handle.classList.remove("is-dragging");
  out.textContent = "idle (" + reason + ")";
}

handle.addEventListener("pointerdown", (event) => {
  active = true;
  handle.classList.add("is-dragging");
  handle.setPointerCapture(event.pointerId);
  out.textContent = "dragging…";
});

handle.addEventListener("pointerup", () => endSession("pointerup"));
handle.addEventListener("pointercancel", () => endSession("pointercancel"));

idle (pointerup)

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const log = [];

["pointercancel", "pointerout", "pointerleave"].forEach((type) => {
  stage.addEventListener(type, () => {
    log.push(type);
    out.textContent = log.join(" → ");
  });
});

pointercancel → pointerout → pointerleave

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("pointercancel", (event) => {
  out.textContent =
    "cancel id=" + event.pointerId +
    " type=" + event.pointerType +
    " primary=" + event.isPrimary;
});

cancel id=2 type=touch primary=true

🚀 Common Use Cases

• Abort drag / resize / draw sessions when the OS steals the gesture.
• Reset pressed styles if touch-action lets the page scroll instead.
• Clear capture-related UI alongside lostpointercapture.
• Handle palm rejection and multi-pointer limits cleanly.
• Teach Pointer Events end paths beyond a simple pointerup.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Always clear gesture state on pointercancel as well as pointerup.
• After cancel, expect pointerout then pointerleave.
• touch-action can cause the browser to take over scrolling/zooming and cancel your pointer.
• Related learning: lostpointercapture, gotpointercapture, paste, addEventListener(), JavaScript hub.

💡 Best Practices