TouchEvent.targetTouches — Eigenschaft · JavaScript-Referenz

Signatur

TouchEvent.targetTouches

Beschreibung

targetTouches ist eine schreibgeschützte TouchList. Sie enthält alle Touch-Objekte, die gerade die Oberfläche berühren und deren touchstart auf demselben Zielelement ausgelöst wurde wie das aktuelle Ereignis (event.target).

So unterscheidet sich die Liste von den beiden anderen:

touches: alle aktiven Berührungspunkte auf dem ganzen Bildschirm, egal auf welchem Element sie begonnen haben.
targetTouches: nur die aktiven Berührungspunkte, die auf demselben Element begonnen haben.
changedTouches: nur die Berührungspunkte, die dieses Ereignis ausgelöst haben, also neu hinzugekommen, bewegt oder entfernt wurden.

Brauchbar ist targetTouches für Gesten, die an ein Element gebunden sind, etwa Pinch-to-Zoom oder Drehen mit zwei Fingern auf einem Bild oder einer Karte. Ein Finger an anderer Stelle auf dem Bildschirm stört dann nicht. Ein Berührungspunkt bleibt dem Element zugeordnet, auf dem er begonnen hat, auch wenn der Finger das Element später verlässt.

Bei touchend und touchcancel ist der gerade losgelassene Finger nicht mehr in targetTouches enthalten. Man findet ihn in changedTouches.

Rückgabewert

Typ

TouchList

Beschreibung

Eine Liste von Touch-Objekten, die wie ein Array aufgebaut ist und nicht verändert werden kann. Zugriff über length, item(index) oder Index-Schreibweise [i]. Die Liste kann leer sein, zum Beispiel bei touchend des letzten Fingers.

Beispiele

Anzahl der Finger auf einem Element anzeigen

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

const update = (event) => {
  pad.textContent = `Finger auf dem Pad: ${event.targetTouches.length}`;
};

pad.addEventListener('touchstart', update);
pad.addEventListener('touchend', update);
pad.addEventListener('touchcancel', update);

Finger auf dem Pad: 2

Pinch-to-Zoom auf einem Bild

const img = document.querySelector('#foto');
let startDistance = 0;
let scale = 1;
let baseScale = 1;

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

img.addEventListener('touchstart', (e) => {
  if (e.targetTouches.length === 2) {
    startDistance = distance(e.targetTouches);
    baseScale = scale;
  }
}, { passive: true });

img.addEventListener('touchmove', (e) => {
  if (e.targetTouches.length !== 2) return;
  e.preventDefault(); // Zoomen der ganzen Seite durch den Browser verhindern
  scale = baseScale * (distance(e.targetTouches) / startDistance);
  img.style.transform = `scale(${scale.toFixed(2)})`;
}, { passive: false });

touches, targetTouches und changedTouches vergleichen

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

box.addEventListener('touchstart', (e) => {
  console.log({
    touches: e.touches.length,
    targetTouches: e.targetTouches.length,
    changedTouches: e.changedTouches.length,
  });
  // In ein echtes Array umwandeln, um Array-Methoden zu nutzen
  const ids = Array.from(e.targetTouches, (t) => t.identifier);
  console.log('IDs auf #box:', ids);
});

{ touches: 3, targetTouches: 2, changedTouches: 1 } IDs auf #box: [0, 1]

// Wichtig · Fallstricke

Keine echte Array-Instanz: TouchList hat weder map noch forEach. Wandle sie mit Array.from() oder dem Spread-Operator in ein Array um.
touchend-Falle: Der losgelassene Finger fehlt in targetTouches. Seine Koordinaten stehen in changedTouches.
Zuordnung bleibt bestehen: Ein Berührungspunkt gehört immer zu dem Element, auf dem sein touchstart ausgelöst wurde. Das gilt auch, wenn der Finger das Element verlässt oder das Element aus dem DOM entfernt wird. Im zweiten Fall kommen keine Ereignisse mehr an, sofern die Listener am Element selbst hängen.
Passive Listener: Chrome und andere Browser registrieren touchstart und touchmove auf window, document und body standardmäßig als passiv. Wer preventDefault() aufrufen will, muss { passive: false } angeben. Oft ist die CSS-Eigenschaft touch-action die bessere Lösung.
Kompatibilität: Touch Events funktionieren auf mobilen Browsern und auf Desktop-Browsern mit Touchscreen. Desktop-Safari unterstützt sie nicht. Für Maus, Stift und Touch mit einer gemeinsamen API gibt es die Pointer Events, die heute meist die bessere Wahl sind.

Siehe auch

TouchEvent.touches TouchEvent.changedTouches TouchList Touch TouchEvent PointerEvent