JavaScript Element touchend Event

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

Definition

In JavaScript, the touchend event fires when one or more touch points are removed from the touch surface (MDN)—usually when a finger lifts. The event object is a TouchEvent. Remember you can get touchcancel instead if the touch is aborted.

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

Syntax

Listen for touchend. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element (or ancestor) listening for the lift
TouchEventRequired. Carries changedTouches, touches, modifiers

Return Value

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

JavaScript Examples

Example 1 — Listen for touchend

Log a message whenever a finger lifts from the pad.

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

pad.addEventListener("touchend", (event) => {
  out.textContent =
    "touchend · lifted=" + event.changedTouches.length;
});
Try It Yourself

How It Works

  1. Get the pad. The element that receives the touch gesture.
  2. Register the listener. addEventListener("touchend", …) runs when a contact leaves the surface.
  3. Count lifted points. changedTouches.length is how many fingers just lifted in this event.
  4. Show the result. Update the status text so students can see the lift.

Example 2 — Read changedTouches

Print the lift position from the first lifted contact.

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

pad.addEventListener("touchend", (event) => {
  const t = event.changedTouches[0];
  if (!t) return;
  out.textContent =
    "lift at x=" + Math.round(t.clientX) +
    " y=" + Math.round(t.clientY);
});
Try It Yourself

How It Works

  1. Wait for lift. The handler runs on touchend.
  2. Pick the point. changedTouches[0] is the first contact that just left.
  3. Read coordinates. clientX / clientY are viewport-relative pixels.
  4. Guard empty lists. If somehow empty, return early so nothing throws.

Example 3 — touchend vs touchcancel Cleanup

Press on start; clear state on both normal lift and abort.

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

function endGesture(reason) {
  out.textContent = reason;
}

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

pad.addEventListener("touchend", () => {
  endGesture("touchend · released");
});

pad.addEventListener("touchcancel", () => {
  endGesture("touchcancel · aborted");
});
Try It Yourself

How It Works

  1. Start the gesture. touchstart marks the pad as pressed.
  2. Normal finish. touchend means the finger lifted—safe to complete a tap.
  3. Abort path. touchcancel clears the same UI without treating it as a success.
  4. Passive start. { passive: true } is fine when you do not call preventDefault.
Compatibility

Browser Support

touchend is marked Limited availability on MDN (not Baseline). Touch Events are reliable on mobile browsers; many desktop browsers omit or limit them. Prefer Pointer Events for mouse + pen + touch together.

✓ Limited availability

Element touchend

Fires when touch points leave the surface. Strong on mobile Chrome / Firefox / Safari iOS / Edge; desktop Safari often lacks Touch Events.

Partial Not Baseline
Google Chrome Touch-capable / mobile
Supported
Mozilla Firefox Mobile & touch-enabled
Supported
Apple Safari iOS yes · desktop often no
Partial
Microsoft Edge Touch-capable / Chromium
Supported
Opera Mobile / Chromium touch paths
Partial
Internet Explorer Use Pointer Events instead
Unavailable
touchend Limited

Bottom line: Use touchend for Touch Events lift handling on mobile. For unified input across devices, ship pointerup with Pointer Events.

Frequently Asked Questions

It fires when one or more touch points are removed from the touch surface—usually when the user lifts a finger. MDN notes you may get touchcancel instead if the touch is aborted.
No. MDN does not mark Element touchend as Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline), mainly because some desktop browsers omit or limit Touch Events.
A TouchEvent. Use changedTouches for the points that just lifted; also inspect touches and targetTouches when needed.
touchend is a normal lift. touchcancel means the system or browser aborted the touch—do not treat cancel as a successful tap.
Many browsers still dispatch mouse and click events after a touch. Prefer Pointer Events (pointerup) for unified input, or guard against double-handling the same action.
For new cross-device UIs (mouse, pen, and touch), prefer Pointer Events. pointerup is the close cousin of touchend.

Next: touchmove

Handle finger movement while contacts stay on the surface.

touchmove 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)

11 people found this page helpful

JavaScript Element touchcancel Event JavaScript Element touchmove Event