TouchList.length — Eigenschaft · JavaScript-Referenz

Signatur

get TouchList.length

Beschreibung

TouchList.length liefert die Anzahl der Touch-Objekte in einer TouchList. Solche Listen bekommst du über ein TouchEvent, und zwar in drei Varianten: event.touches (alle Finger, die gerade den Bildschirm berühren), event.targetTouches (alle Finger auf dem Zielelement) und event.changedTouches (die Berührungspunkte, die sich mit diesem Ereignis geändert haben).

Meistens brauchst du length, um Mehrfinger-Gesten zu erkennen, zum Beispiel ein Zwei-Finger-Zoom (Pinch) oder ein Drei-Finger-Wischen. Außerdem lässt sich damit prüfen, ob beim touchend noch Finger auf dem Bildschirm liegen. Zusammen mit TouchList.item(index) oder dem Indexzugriff list[i] kannst du über alle Berührungspunkte iterieren.

Der Wert ist eine nicht-negative Ganzzahl und schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Eine TouchList ist kein echtes Array. Sie hat zwar length und Indexzugriff, aber keine Methoden wie map oder filter.

Rückgabewert

Typ

number

Beschreibung

Anzahl der Touch-Objekte in der Liste als nicht-negative Ganzzahl. 0 bedeutet eine leere Liste, etwa event.touches beim touchend des letzten Fingers.

Beispiele

Anzahl aktiver Finger anzeigen

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

const zeigeFinger = (event) => {
  // event.touches enthält alle Finger auf dem Bildschirm
  console.log(`Aktive Berührungen: ${event.touches.length}`);
};

flaeche.addEventListener('touchstart', zeigeFinger);
flaeche.addEventListener('touchend', zeigeFinger);

Aktive Berührungen: 1 Aktive Berührungen: 2 Aktive Berührungen: 1 Aktive Berührungen: 0

Zwei-Finger-Pinch-Geste erkennen

const bild = document.querySelector('#zoom-bild');
let startAbstand = null;

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

bild.addEventListener('touchstart', (event) => {
  if (event.touches.length === 2) {
    startAbstand = abstand(event.touches[0], event.touches[1]);
  }
}, { passive: true });

bild.addEventListener('touchmove', (event) => {
  // Nur bei genau zwei Fingern skalieren
  if (event.touches.length !== 2 || startAbstand === null) return;
  event.preventDefault(); // natives Browser-Zoomen unterdrücken
  const faktor = abstand(event.touches[0], event.touches[1]) / startAbstand;
  bild.style.transform = `scale(${faktor.toFixed(2)})`;
}, { passive: false });

bild.addEventListener('touchend', (event) => {
  if (event.touches.length < 2) startAbstand = null;
});

Über changedTouches iterieren

document.addEventListener('touchend', (event) => {
  const { changedTouches } = event;
  for (let i = 0; i < changedTouches.length; i++) {
    const t = changedTouches.item(i);
    console.log(`Finger ${t.identifier} losgelassen bei (${t.clientX}, ${t.clientY})`);
  }
  // Alternativ in ein echtes Array umwandeln
  const ids = Array.from(changedTouches, (t) => t.identifier);
  console.log('IDs:', ids, 'Anzahl:', ids.length);
});

Finger 0 losgelassen bei (120, 340) IDs: [0] Anzahl: 1

// Wichtig · Fallstricke

Die richtige Liste wählen: Beim touchend und touchcancel enthält event.touches den losgelassenen Finger nicht mehr. Deshalb ist touches.length beim letzten Finger 0. Den losgelassenen Finger findest du in changedTouches.
Kein Array: TouchList hat keine Array-Methoden. Wandle die Liste bei Bedarf mit Array.from(list) oder [...list] um. Die Liste ist iterierbar.
Schreibgeschützt: Eine Zuweisung an length hat keine Wirkung und wirft im strikten Modus einen TypeError.
Kompatibilität: Touch-Events gibt es in allen mobilen Browsern und in Chromium-/Firefox-/Safari-Versionen auf Touch-Geräten. Auf Desktop-Geräten ohne Touchscreen ist TouchEvent oft nicht vorhanden oder wird nie ausgelöst. Für Maus, Stift und Touch zusammen sind Pointer Events meist die robustere Wahl.
Performance: Soll preventDefault() in touchmove greifen, muss der Listener mit { passive: false } registriert werden. Andernfalls sind passive Listener für flüssiges Scrollen vorzuziehen.
Die maximale Zahl gleichzeitiger Berührungen hängt von der Hardware ab. Sie lässt sich über navigator.maxTouchPoints abfragen.

Siehe auch

TouchList TouchList.item() Touch TouchEvent TouchEvent.touches TouchEvent.changedTouches TouchEvent.targetTouches Navigator.maxTouchPoints