JavaScript Element pointercancel Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word POINTERCANCEL

Definition

In JavaScript, the pointercancel event fires when the browser decides there will likely be no more events for that pointer, or when after pointerdown the pointer is used to pan, zoom, or scroll the viewport (MDN).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for pointercancel. Start with this line.

JavaScript
addEventListener("pointercancel", fn)
CallWhat it does
addEventListener("pointercancel", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("pointercancel", …) — no import required.

Library declarations
JavaScript
addEventListener("pointercancel", fn)

Parameters

ParameterDescription
Event nameRequired. "pointercancel"
Handler propOptional. onpointercancel
PointerEventRequired. pointerId, pointerType, …
CleanupRequired. Reset UI / release capture state

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log pointercancel (MDN)

MDN’s basic listener when a pointer is cancelled.

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

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

How It Works

  1. Listen on an element that receives pointer input.
  2. Handler runs on cancel — not on a normal release.
  3. Read pointerId to know which pointer stream ended.
  4. On desktop, cancel is rarer; use the Try It lab’s simulate button.

Example 2 — onpointercancel Property (MDN)

Same idea using the event handler property.

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

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

How It Works

  1. Assign onpointercancel — MDN supports the handler property.
  2. Same event as addEventListener("pointercancel", …).
  3. Later assignment replaces the previous on* handler.
  4. Prefer addEventListener when you need multiple handlers.

Example 3 — Abort a Drag on Cancel

Start on pointerdown, finish on pointerup, abort on pointercancel.

JavaScript
const pad = document.getElementById("pad");
let dragging = false;

pad.addEventListener("pointerdown", () => {
  dragging = true;
  console.log("drag start");
});

pad.addEventListener("pointerup", () => {
  if (!dragging) return;
  dragging = false;
  console.log("drag end");
});

pad.addEventListener("pointercancel", () => {
  if (!dragging) return;
  dragging = false;
  console.log("drag aborted");
});
Try It Yourself

How It Works

  1. Mark active on down. A real gesture has begun.
  2. Clear on up. Normal completion.
  3. Clear on cancel. MDN: unlikely more events for that pointer.
  4. Avoid sticky UI — never leave “dragging” true after a cancel.
Compatibility

Browser Support

Element pointercancel is Baseline Widely available (MDN: since July 2020). Safe for modern evergreen browsers.

✓ Baseline · Widely available

pointercancel

Fires when the browser cancels a pointer stream. Essential cleanup for drag/draw gestures.

99% Widely available
Google Chrome Yes
Yes
Microsoft Edge Yes
Yes
Mozilla Firefox Yes
Yes
Apple Safari Yes
Yes
Opera Yes
Yes
Internet Explorer IE11 (Pointer Events)
Partial
pointercancel Excellent

Bottom line: Listen for pointercancel whenever you start a gesture on pointerdown. See the MDN pointercancel reference.

Frequently Asked Questions

MDN: it fires when the browser determines there are unlikely to be more pointer events, or when after pointerdown the pointer is used to pan, zoom, or scroll the viewport. Use it to abort in-progress gestures.
No. MDN marks Element pointercancel as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, isPrimary, and pressure.
MDN: the browser also sends pointerout followed by pointerleave after pointercancel.
Whenever you start a drag, draw, or press-and-hold on pointerdown. Cancel resets UI if the OS steals the gesture (home button, app switcher, orientation change, palm rejection, touch-action scroll, too many pointers).
If you used setPointerCapture, a cancel path can also fire lostpointercapture. Clear drag state on pointercancel and/or lostpointercapture so the UI never sticks.

Next: pointerdown

Continue with the Element pointerdown event.

pointerdown →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Element paste Event JavaScript Element pointerdown Event