JavaScript Element touchend Event

What You’ll Learn

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

Introduction

touchend is the normal end of a touch: the user lifts one or more fingers. Use it to finish a drag, complete a tap, or clear “pressed” UI.

MDN reminds you that a gesture can end with touchcancel instead—always handle both if you track press/drag state. Browsers may also synthesize mouse / click events after touch, so avoid double actions.

Understanding touchend

An instance event that answers: “Did one or more fingers leave the surface?”

• Trigger — touch points removed (normal lift).
• Event type — TouchEvent; use changedTouches.
• Bubbles — yes; cancelable behavior can vary by UA.
• Remember — you may get touchcancel instead of touchend.
• Limited availability on MDN (not Baseline)—desktop Safari often lacks Touch Events.

📝 Syntax

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

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

ontouchend = (event) => { };

Event type

A TouchEvent (inherits from UIEvent / Event).

Handy TouchEvent properties

⚖️ touchend vs Related Signals

Examples Gallery

Patterns follow MDN Element: touchend event and the Touch events guide. Use a touch device or DevTools touch simulation; some labs include a button for desktop practice.

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

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

touchend · lifted=1

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

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

ontouchend fired

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);
});

lift at x=142 y=88

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

function clearPress(reason) {
  pad.classList.remove("pressed");
  out.textContent = reason;
}

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

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

touchend · released

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

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

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

No Touch Events — use Pointer Events (pointerup)

🚀 Common Use Cases

• Complete a tap or button press when the finger lifts.
• End a drag / swipe and snap to the final position.
• Clear pressed / active styles on release.
• Read the last lift coordinates from changedTouches.
• Migrate toward pointerup for mouse + pen + touch together.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• You can receive touchcancel instead of touchend—handle both for press/drag UI.
• Desktop Safari often lacks Touch Events; test on iOS Safari / Android browsers.
• Prefer Pointer Events for new cross-device interaction code.
• Related learning: touchcancel, pointerup, addEventListener(), JavaScript hub.

💡 Best Practices