TouchEvent.touches — Eigenschaft · JavaScript-Referenz

Signatur

TouchEvent.touches

Beschreibung

Die Eigenschaft touches eines TouchEvent liefert eine TouchList mit einem Touch-Objekt für jeden Finger bzw. Stift, der sich aktuell auf der Berührungsoberfläche befindet. Sie gibt damit den Gesamtzustand aller aktiven Kontakte wieder, unabhängig davon, auf welchem Element die Berührung begonnen hat und ob sich der Punkt im aktuellen Ereignis bewegt hat.

Damit unterscheidet sie sich von den beiden verwandten Listen:

targetTouches – nur die Kontakte, die auf dem aktuellen Zielelement begonnen haben und noch aktiv sind.
changedTouches – nur die Kontakte, die das aktuelle Ereignis ausgelöst haben (neu hinzugekommen, bewegt oder abgehoben).

Typische Einsatzfälle für touches sind Mehrfinger-Gesten wie Pinch-to-Zoom oder Rotation, bei denen man die Anzahl und Position aller Finger kennen muss (event.touches.length). Bei touchend und touchcancel ist der abgehobene Finger nicht mehr in touches enthalten – für ihn muss man changedTouches auswerten.

Rückgabewert

Typ

TouchList

Beschreibung

Eine schreibgeschützte, array-ähnliche TouchList mit Touch-Objekten (Eigenschaften u. a. identifier, clientX, clientY, pageX, target). Zugriff per Index, item(i) oder Iteration; Länge über length.

Beispiele

Anzahl der aktiven Finger anzeigen

const flaeche = document.querySelector('#flaeche');

const zeigeAnzahl = (event) => {
  flaeche.textContent = `Aktive Finger: ${event.touches.length}`;
};

flaeche.addEventListener('touchstart', zeigeAnzahl);
flaeche.addEventListener('touchmove', zeigeAnzahl);
flaeche.addEventListener('touchend', zeigeAnzahl);

Aktive Finger: 2 (bei zwei aufgelegten Fingern)

Pinch-to-Zoom mit zwei Fingern

const bild = document.querySelector('#bild');
let startAbstand = 0;
let skalierung = 1;
let basis = 1;

const abstand = ([a, b]) =>
  Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);

bild.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    startAbstand = abstand(e.touches);
    basis = skalierung;
  }
}, { passive: true });

bild.addEventListener('touchmove', (e) => {
  if (e.touches.length !== 2) return;
  e.preventDefault(); // natives Browser-Zoomen verhindern
  skalierung = basis * (abstand(e.touches) / startAbstand);
  bild.style.transform = `scale(${skalierung.toFixed(2)})`;
}, { passive: false });

Unterschied touches vs. changedTouches bei touchend

document.addEventListener('touchend', (e) => {
  const abgehoben = [...e.changedTouches].map((t) => t.identifier);
  const nochAktiv = [...e.touches].map((t) => t.identifier);
  console.log('Abgehoben:', abgehoben, '– noch aktiv:', nochAktiv);
});

Abgehoben: [1] – noch aktiv: [0]

// Wichtig · Fallstricke

Bei touchend/touchcancel fehlt der abgehobene Finger in touches; wird der letzte Finger gehoben, ist touches.length === 0. Positionen dann aus changedTouches lesen.
TouchList ist kein echtes Array: map/filter fehlen. Mit [...e.touches] oder Array.from() umwandeln. Die Reihenfolge ist nicht garantiert – Finger über identifier zuordnen, nicht über den Index.
Touch-Listener auf document/window sind in Chrome und Firefox standardmäßig passiv; preventDefault() wirkt nur mit { passive: false }. Zusätzlich hilft CSS touch-action: none.
Kompatibilität: Touch Events gibt es in mobilen Browsern und Chromium/Firefox auf Touch-Geräten; Desktop-Safari unterstützt sie nicht. Für Maus, Stift und Touch einheitlich empfiehlt sich die Pointer Events API.

Siehe auch

Touch FetchEvent.handled TouchEvent.altKey TouchEvent.ctrlKey TouchEvent.metaKey