Touch.target — Eigenschaft · JavaScript-Referenz

Signatur

Touch.target

Beschreibung

Die Eigenschaft target eines Touch-Objekts gibt das Element zurück, auf dem der Finger oder Stift die Oberfläche zuerst berührt hat. Dieser Wert bleibt während der ganzen Berührung gleich. Er ändert sich also nicht, wenn der Berührungspunkt über andere Elemente oder aus dem Dokument hinaus bewegt wird.

Damit unterscheidet sich touchmove grundlegend von mousemove: Das Ereignis und seine Touch-Objekte gehören immer zum Startelement. Das Element, das sich aktuell unter dem Finger befindet, ermittelt man mit document.elementFromPoint(touch.clientX, touch.clientY).

Typische Einsatzfälle sind Drag-and-drop auf Touch-Geräten, Mehrfinger-Gesten (jeder Finger kann auf einem anderen Element begonnen haben) und Ereignisdelegation. Mit touch.target lässt sich z. B. herausfinden, welches Listenelement ein Wisch-Vorgang betrifft.

Wird das Startelement während der Berührung aus dem DOM entfernt, zeigt target weiterhin darauf. Die folgenden touchmove- und touchend-Ereignisse kommen dann nicht mehr bei Listenern an, die nur auf dem Dokument registriert sind.

Rückgabewert

Typ

EventTarget

Beschreibung

Das Element (meist ein Element), auf dem der Berührungspunkt mit touchstart begonnen hat. Die Eigenschaft ist schreibgeschützt.

Beispiele

Startelement jedes Fingers protokollieren

document.addEventListener('touchstart', (event) => {
  for (const touch of event.changedTouches) {
    console.log(`Finger ${touch.identifier} startete auf <${touch.target.tagName.toLowerCase()}>`);
  }
}, { passive: true });

Finger 0 startete auf <button>

target bleibt gleich – aktuelles Element per elementFromPoint

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

box.addEventListener('touchmove', (event) => {
  const touch = event.touches[0];
  const unterDemFinger = document.elementFromPoint(touch.clientX, touch.clientY);

  console.log('Start:', touch.target.id);          // immer "box"
  console.log('Aktuell:', unterDemFinger?.id ?? '(außerhalb)');
}, { passive: true });

Start: box Aktuell: dropzone

Touch-Drag-and-drop mit Ereignisdelegation

const liste = document.querySelector('#aufgaben');
let gezogen = null;

liste.addEventListener('touchstart', (event) => {
  // Das Listenelement finden, in dem die Berührung begann
  gezogen = event.changedTouches[0].target.closest('li');
  gezogen?.classList.add('zieht');
}, { passive: true });

liste.addEventListener('touchend', (event) => {
  if (!gezogen) return;
  const t = event.changedTouches[0];
  const ziel = document.elementFromPoint(t.clientX, t.clientY)?.closest('li');
  if (ziel && ziel !== gezogen) {
    liste.insertBefore(gezogen, ziel);
  }
  gezogen.classList.remove('zieht');
  gezogen = null;
});

// Wichtig · Fallstricke

Kein „Hover-Ziel“: touch.target zeigt nie das Element, über dem sich der Finger gerade befindet. Dafür braucht man document.elementFromPoint().
Entfernte Elemente: Wird das Startelement während der Berührung aus dem DOM entfernt, kommen weitere touchmove- und touchend-Ereignisse nicht mehr beim Dokument an. Deshalb das Element lieber ausblenden oder die Listener direkt am Startelement registrieren.
Textknoten: Moderne Browser liefern ein Element. In älteren WebKit-Versionen konnte target jedoch ein Textknoten sein. Wer .closest() verwendet, sollte vorher nodeType prüfen.
Shadow DOM: Außerhalb eines Shadow-Roots wird das Ziel wie bei Event.target auf den Host umgeschrieben (Retargeting). Das tatsächliche innere Element erhält man mit event.composedPath().
Kompatibilität: Touch Events sind in Desktop-Browsern oft nur bei vorhandenem Touchscreen aktiv. Für Maus, Stift und Touch gemeinsam eignen sich meist Pointer Events besser; zusammen mit setPointerCapture() lässt sich das Zielverhalten dort steuern.

Siehe auch

Touch Touch.identifier Event.target Touch.pageX Touch.pageY