JavaScript Element touchcancel Event

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

Definition

In JavaScript, the touchcancel event fires when one or more touch points have been disrupted in an implementation-specific way (MDN). The event object is a TouchEvent.

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

Syntax

Listen for touchcancel. Start with this line.

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

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

Library declarations
JavaScript
el.addEventListener("touchcancel", fn)

Parameters

ParameterDescription
Event nameRequired. "touchcancel"
Handler propOptional. ontouchcancel
TouchEventRequired. changedTouches, touches, …
CleanupRequired. Reset UI / drop in-progress state

Return Value

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

JavaScript Examples

Example 1 — Log touchcancel

Listen and read how many points were canceled.

JavaScript
const pad = document.getElementById("pad");

pad.addEventListener("touchcancel", (event) => {
  console.log("canceled:", event.changedTouches.length);
});
Try It Yourself

How It Works

  1. Select the element. Attach the listener where the touch began.
  2. Register touchcancel. Prefer addEventListener.
  3. Read changedTouches. Those are the points the browser just canceled.
  4. Use the count for logging. Real devices may cancel more than one point at once.

Example 2 — ontouchcancel Property

MDN also documents the handler property form.

JavaScript
const pad = document.getElementById("pad");

pad.ontouchcancel = () => {
  console.log("Touch canceled");
};
Try It Yourself

How It Works

  1. Assign ontouchcancel. One handler slot on the element.
  2. Handler runs on cancel. Same event timing as addEventListener.
  3. Prefer addEventListener in apps. Easier to add/remove multiple listeners.
  4. Property is fine for demos. Matches MDN’s documented syntax.

Example 3 — Abort a Gesture

Start on touchstart, finish on touchend, abort on touchcancel.

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

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

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

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

How It Works

  1. Set a flag on start. touchstart means a gesture is in progress.
  2. Normal path: touchend finishes and clears the flag.
  3. Abort path: touchcancel clears state without “success” logic.
  4. Why it matters: without cancel cleanup, drag UI can stick after Home/rotate.
Compatibility

Browser Support

Element touchcancel is a standard Touch Events API event. MDN marks it Limited availability (not Baseline) — support varies across widely used browsers.

✓ Limited availability

Element touchcancel

Fires when touch points are disrupted — pair with touchstart / touchend for full gesture cleanup.

Varies Not Baseline
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
touchcancel Feature-detect

Bottom line: Always feature-detect. Prefer addEventListener. Use touchend for normal lift and touchcancel for aborted touches. See the MDN touchcancel reference.

Frequently Asked Questions

It fires when one or more touch points are disrupted in an implementation-specific way (MDN)—for example Home/app switch, screen rotation, palm rejection, touch-action stopping the gesture, or too many fingers.
No. MDN does not mark Element touchcancel as Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline) because support is missing or limited in some widely used browsers.
A TouchEvent. Use changedTouches for the touch points that were canceled; also inspect touches and targetTouches as needed.
touchend means the user lifted a finger normally. touchcancel means the system or browser aborted the touch—treat it as cleanup, not a successful tap or drag end.
For cross-device UIs (mouse, pen, and touch), prefer Pointer Events. pointercancel is the close cousin of touchcancel for aborted pointers.
Use DevTools device mode with touch simulation, or the Simulate cancel control on this page. On a phone, press Home or rotate while touching the page.

Next: touchend

Learn when a finger lifts normally after a touch.

touchend tutorial →

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)

10 people found this page helpful

JavaScript Element securitypolicyviolation Event JavaScript Element touchend Event