Element: touchend — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("touchend", handler)

Beschreibung

Das Event touchend tritt auf, wenn der Nutzer einen oder mehrere Finger (oder einen Stift) von einer Touch-Oberfläche abhebt. Es wird an das Element geschickt, auf dem die Berührung begonnen hat, also an das Ziel des zugehörigen touchstart. Das gilt auch dann, wenn der Finger inzwischen außerhalb dieses Elements liegt oder das Element aus dem DOM entfernt wurde. Das Event steigt im DOM auf (Bubbling) und kann abgebrochen werden (cancelable).

Du registrierst es mit element.addEventListener("touchend", handler) oder über die Eigenschaft element.ontouchend = handler. Der Handler bekommt ein TouchEvent. Wichtig: Der Finger, der gerade abgehoben wurde, steht in event.changedTouches und nicht mehr in event.touches oder event.targetTouches. Diese beiden Listen enthalten nur noch die Berührungspunkte, die weiterhin aufliegen.

Typische Einsätze sind Gesten, die beim Abheben enden, zum Beispiel Wischen (Swipe), Tippen, langes Drücken oder das Ende von Drag-and-Drop auf Mobilgeräten. Beim Abschluss einer Geste rechnest du meist die Koordinaten aus changedTouches[0] gegen den Startpunkt aus touchstart auf.

Für neuen Code, der Maus, Stift und Touch gleichermaßen abdecken soll, sind Pointer Events (pointerup) oft die bessere Wahl. touchend brauchst du vor allem dann, wenn du gezielt mehrere Finger über die Touch-Listen auswerten willst.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Event-Name `"touchend"`.
$handler Pflicht	(event: TouchEvent) => void		Callback, der ein `TouchEvent` bekommt. Wichtige Eigenschaften: `changedTouches` (die abgehobenen Punkte), `touches`, `targetTouches`, `altKey`/`ctrlKey`/`shiftKey`/`metaKey`.
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Optionen für `addEventListener`. Mit `passive: false` kann der Handler `preventDefault()` aufrufen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt undefined zurück. Der Handler bekommt ein TouchEvent-Objekt.

Beispiele

Abgehobenen Finger per addEventListener auswerten

const area = document.querySelector('#touch-area');

area.addEventListener('touchend', (event) => {
  // Der abgehobene Finger steht nur in changedTouches
  const touch = event.changedTouches[0];
  console.log(`Abgehoben bei x=${Math.round(touch.clientX)}, y=${Math.round(touch.clientY)}`);
  console.log(`Noch aufliegende Finger: ${event.touches.length}`);
});

Abgehoben bei x=142, y=318 Noch aufliegende Finger: 0

Swipe-Geste erkennen (touchstart + touchend)

const carousel = document.querySelector('.carousel');
let startX = 0;
let startY = 0;

carousel.addEventListener('touchstart', (e) => {
  startX = e.changedTouches[0].clientX;
  startY = e.changedTouches[0].clientY;
}, { passive: true });

carousel.addEventListener('touchend', (e) => {
  const dx = e.changedTouches[0].clientX - startX;
  const dy = e.changedTouches[0].clientY - startY;
  // Nur deutliche, überwiegend horizontale Bewegungen zählen
  if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
    console.log(dx < 0 ? 'Swipe nach links → nächstes Bild' : 'Swipe nach rechts → vorheriges Bild');
  }
});

Swipe nach links → nächstes Bild

on-Property und removeEventListener

const button = document.querySelector('#tap-button');

// Variante 1: on-Property (nur ein Handler möglich)
button.ontouchend = () => console.log('Tipp beendet');
button.ontouchend = null; // wieder entfernen

// Variante 2: benannte Funktion, damit sie sich wieder entfernen lässt
const handleTouchEnd = (e) => {
  e.preventDefault(); // unterdrückt den nachfolgenden simulierten click
  console.log('Einmaliger Tipp erkannt');
  button.removeEventListener('touchend', handleTouchEnd);
};
button.addEventListener('touchend', handleTouchEnd, { passive: false });

Einmaliger Tipp erkannt

// Wichtig · Fallstricke

Häufiger Fehler: event.touches[0] ist in touchend beim Abheben des letzten Fingers undefined. Lies die Koordinaten immer aus event.changedTouches.
Das Ziel ist immer das Element des ursprünglichen touchstart, nicht das Element unter dem Finger. Das aktuelle Element unter dem Finger bekommst du mit document.elementFromPoint(touch.clientX, touch.clientY).
Ein preventDefault() in touchend unterdrückt die simulierten Maus-Events (mousedown, mouseup, click). Das kann Links oder Buttons unbenutzbar machen, also nur gezielt einsetzen. Einige Browser registrieren touchstart/touchmove auf Dokument-Ebene standardmäßig als passiv. Für preventDefault() solltest du deshalb ausdrücklich { passive: false } setzen.
Bricht das System die Berührung ab (etwa durch einen Anruf, einen Scroll-Übergriff oder zu viele Finger), feuert statt touchend das Event touchcancel. Behandle beide Events, damit der Zustand deiner Geste sauber zurückgesetzt wird.
Kompatibilität: Touch-Events gibt es in allen mobilen Browsern sowie in Chrome, Edge und Firefox auf Touch-Geräten. Desktop-Safari unterstützt sie nicht. Zur Funktionsprüfung: 'ontouchstart' in window. Für geräteübergreifenden Code sind Pointer Events (pointerup) zu empfehlen.

Siehe auch

Element: touchstart Element: touchmove Element: touchcancel TouchEvent Touch Element: pointerup EventTarget.addEventListener()