JavaScript Element touchcancel Event

What You’ll Learn

The touchcancel event fires when one or more touch points are disrupted. Learn TouchEvent, changedTouches, how it differs from touchend, cleanup patterns, Pointer Events alternatives, and five try-it labs.

Introduction

Touch gestures do not always end with a clean finger lift. touchcancel means the browser or device aborted the touch—so your drag, press, or multi-touch state should reset.

MDN lists common causes: switching apps / Home button, orientation change, palm rejection, touch-action stopping the input, or too many simultaneous fingers. Treat cancel like an emergency stop, not a successful tap.

Understanding touchcancel

An instance event that answers: “Was this touch aborted before a normal lift?”

• Trigger — touch points disrupted (system / UA / CSS / hardware).
• Event type — TouchEvent; use changedTouches.
• Bubbles — yes; typically not cancelable (no default action).
• Job — clean up press/drag state; do not treat as a click.
• Limited availability on MDN (not Baseline)—desktop Safari often lacks Touch Events.

⚡ When touchcancel Fires

• Hardware / OS interrupts (Home, app switcher).
• Screen orientation changes mid-touch.
• Palm rejection or accidental-touch heuristics.
• touch-action CSS prevents the gesture from continuing.
• Too many simultaneous contact points for the implementation.

📝 Syntax

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

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

ontouchcancel = (event) => { };

Event type

A TouchEvent (inherits from UIEvent / Event).

Handy TouchEvent properties

⚖️ touchcancel vs Related Signals

Examples Gallery

Patterns follow MDN Element: touchcancel event and the Touch events guide. Use a touch device or DevTools touch simulation; some labs include a button that runs the same cleanup handler for desktop practice.

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

pad.addEventListener("touchcancel", (event) => {
  out.textContent =
    "touchcancel · changed=" + event.changedTouches.length;
});

touchcancel · changed=1

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

pad.ontouchcancel = (event) => {
  out.textContent = "ontouchcancel fired";
};

ontouchcancel fired

pad.addEventListener("touchcancel", (event) => {
  const ids = [];
  for (let i = 0; i < event.changedTouches.length; i++) {
    ids.push(event.changedTouches[i].identifier);
  }
  out.textContent = "canceled ids: " + ids.join(", ");
});

canceled ids: 0

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

function endDrag(reason) {
  pad.classList.remove("dragging");
  out.textContent = reason;
}

pad.addEventListener("touchstart", () => {
  pad.classList.add("dragging");
  out.textContent = "dragging…";
}, { passive: true });

pad.addEventListener("touchend", () => endDrag("touchend · released"));
pad.addEventListener("touchcancel", () => endDrag("touchcancel · aborted"));

touchcancel · aborted

const out = document.getElementById("out");
const hasTouch = "ontouchcancel" in window;

out.textContent = hasTouch
  ? "Touch Events available — listen for touchcancel"
  : "No Touch Events — use Pointer Events (pointercancel)";

if (hasTouch) {
  document.getElementById("pad").addEventListener("touchcancel", () => {
    out.textContent = "touchcancel received";
  });
}

No Touch Events — use Pointer Events (pointercancel)

🚀 Common Use Cases

• Reset drag-and-drop or slider state when the OS interrupts a touch.
• Cancel long-press menus if the finger is aborted mid-hold.
• Clear multi-touch drawing / pinch state on interruption.
• Avoid firing “tap completed” logic when the gesture was canceled.
• Migrate touch-only apps toward pointercancel for mouse + pen + touch.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• Desktop Safari often lacks Touch Events; test on iOS Safari / Android browsers.
• Prefer Pointer Events for new cross-device interaction code.
• Always clean up on both touchend and touchcancel.
• Related learning: securitypolicyviolation, pointerup, addEventListener(), JavaScript hub.

💡 Best Practices