HTML touchcancel DOM Event: Reference and Examples

When someone interacts with a webpage, the browser sends events to the relevant JavaScript code. The touchcancel event happens when a touch sequence is unexpectedly interrupted.

When touchcancel happens

A touch sequence is unexpectedly interrupted.

You can listen for it using addEventListener(). That keeps event handling separate from HTML attributes such as onclick and works well with modern code organization.

A small working example

<div id="demo-target" style="padding: 2rem; border: 1px solid">Touch here on a touchscreen</div>
<p id="event-status" role="status">Waiting for touchcancel...</p>
<script>
    const eventTarget = document.getElementById("demo-target");
    const eventStatus = document.getElementById("event-status");

    if (eventTarget) {
        eventTarget.addEventListener("touchcancel", (eventDetails) => {
            eventStatus.textContent = "touchcancel event received";
            console.log(eventDetails.type, eventDetails.target);
        });
    }
</script>

Reading the code

The browser listens for touchcancel on the relevant target. When the event occurs, the callback receives eventDetails, updates the status message and logs the event name and target in Developer Tools.

A browser gesture or interruption can cancel touch; prefer pointer events where suitable.

Pointer events work across several input devices. Touch events are tied to touch-capable platforms; when possible, prefer a pointer-based implementation with accessible keyboard controls.

Try it in your browser

Open the page, show the Console panel, and follow this test: A browser gesture or interruption can cancel touch; prefer pointer events where suitable. Then change one thing in the example and observe whether the event still fires.

Common Beginner Mistakes

• Expecting touchcancel to fire without its required user action or browser condition.
• A browser gesture or interruption can cancel touch; prefer pointer events where suitable.
• Adding repeated event listeners without considering cleanup or unwanted side effects.

Key Takeaways

• touchcancel reports a touch sequence is unexpectedly interrupted.
• addEventListener("touchcancel", ...) listens for the event on the appropriate target.
• A browser gesture or interruption can cancel touch; prefer pointer events where suitable.