Element: touchstart — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("touchstart", handler, options)

Beschreibung

Das Ereignis touchstart gehört zur Touch Events API. Es wird an dem Element ausgelöst, auf dem ein neuer Berührungspunkt aufgesetzt wird. Das Ereignisobjekt ist ein TouchEvent. Es steigt im DOM auf (bubbles) und lässt sich abbrechen (cancelable). Einen Handler registrieren Sie mit addEventListener("touchstart", …) oder über die Eigenschaft element.ontouchstart.

Das Ereignis bringt drei Listen vom Typ TouchList mit:

touches: alle Berührungspunkte, die gerade auf dem Bildschirm liegen.
targetTouches: alle Berührungspunkte, die auf dem Ziel-Element begonnen haben.
changedTouches: die Berührungspunkte, die mit genau diesem Ereignis neu hinzugekommen sind.

Jedes Touch-Objekt enthält unter anderem eine eindeutige identifier sowie die Koordinaten clientX/clientY und pageX/pageY. Mit der identifier können Sie einen Finger über die folgenden touchmove- und touchend-Ereignisse hinweg verfolgen.

touchstart eignet sich für Wisch-Gesten, eigene Schieberegler, Zeichenflächen oder Multi-Touch-Gesten wie das Zoomen mit zwei Fingern. Wenn Sie im Handler preventDefault() aufrufen, unterdrücken Sie das Standardverhalten: Scrollen, Zoomen und die daraus erzeugten Maus-Ereignisse (mousedown, click). Für neuen Code sind die geräteübergreifenden Pointer Events (pointerdown) meist die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"touchstart"`.
$handler Pflicht	(event: TouchEvent) => void		Callback-Funktion. Sie erhält ein `TouchEvent` mit `touches`, `targetTouches` und `changedTouches`.
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Optionen für den Listener. `passive: true` verbessert die Scroll-Leistung, verbietet aber `preventDefault()`. Mit `passive: false` dürfen Sie das Standardverhalten unterdrücken.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein TouchEvent.

Beispiele

Berührungspunkte protokollieren

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

flaeche.addEventListener('touchstart', (event) => {
  for (const touch of event.changedTouches) {
    console.log(`Finger ${touch.identifier} bei x=${Math.round(touch.clientX)}, y=${Math.round(touch.clientY)}`);
  }
  console.log('Finger auf dem Bildschirm insgesamt:', event.touches.length);
}, { passive: true });

Finger 0 bei x=120, y=340 Finger auf dem Bildschirm insgesamt: 1

Wisch-Geste erkennen (touchstart + touchend)

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

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

karte.addEventListener('touchend', (e) => {
  const t = e.changedTouches[0];
  const dx = t.clientX - startX;
  const dy = t.clientY - startY;
  // Nur deutlich horizontale Bewegungen ab 50px werten
  if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
    console.log(dx > 0 ? 'Wisch nach rechts' : 'Wisch nach links');
  }
}, { passive: true });

Wisch nach links

Scrollen auf einer Zeichenfläche unterdrücken und mit on-Property arbeiten

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// passive: false ist nötig, damit preventDefault() wirkt
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault(); // kein Scrollen/Zoomen, kein simulierter click
  const rect = canvas.getBoundingClientRect();
  for (const t of e.changedTouches) {
    ctx.beginPath();
    ctx.arc(t.clientX - rect.left, t.clientY - rect.top, 6, 0, Math.PI * 2);
    ctx.fill();
  }
}, { passive: false });

// Alternative über die on-Property (ersetzt einen früheren Handler)
const knopf = document.querySelector('#knopf');
knopf.ontouchstart = () => knopf.classList.add('gedrueckt');
knopf.ontouchend = () => knopf.classList.remove('gedrueckt');

Listener wieder entfernen

const controller = new AbortController();
const slider = document.querySelector('.slider');

const onStart = (e) => console.log('Start mit', e.touches.length, 'Finger(n)');

slider.addEventListener('touchstart', onStart, { passive: true, signal: controller.signal });

// Später: entweder per Referenz ...
slider.removeEventListener('touchstart', onStart);
// ... oder über das AbortSignal
controller.abort();

// Wichtig · Fallstricke

Passive Listener: Chrome, Edge und Firefox behandeln touchstart-Listener auf window, document und body standardmäßig als passive: true. Ein preventDefault() wird dort ignoriert und erzeugt eine Warnung in der Konsole. Wenn Sie das Standardverhalten unterdrücken wollen, geben Sie { passive: false } ausdrücklich an. Sonst verwenden Sie besser passive: true, damit das Scrollen flüssig bleibt.
CSS statt JavaScript: Um nur das Scrollen oder Zoomen zu verhindern, genügt oft touch-action: none (oder pan-y usw.). Das ist leistungsfähiger als preventDefault().
Doppelte Ereignisse: Nach einem Tipp erzeugen Browser zusätzlich simulierte Maus-Ereignisse (mousedown, mouseup, click). Wenn Sie Touch und Maus gleichzeitig behandeln, reagiert der Code womöglich doppelt. Pointer Events lösen dieses Problem.
Das Ziel bleibt gleich: Alle folgenden touchmove-/touchend-Ereignisse eines Fingers gehen an das Element, auf dem touchstart stattfand, auch wenn der Finger es verlässt. Entfernen Sie dieses Element während der Berührung nicht aus dem DOM, sonst kommen die folgenden Ereignisse nicht mehr an.
Kompatibilität: Alle mobilen Browser unterstützen das Ereignis. Auf Desktop-Rechnern feuert es nur mit Touch-Hardware; Safari auf macOS unterstützt Touch Events gar nicht. Prüfen Sie die Unterstützung mit 'ontouchstart' in window, schließen Sie daraus aber nicht auf ein reines Touch-Gerät.
changedTouches enthält bei touchstart nur die neuen Finger. touches enthält alle aktiven Finger, auch die, die bereits vorher lagen.

Siehe auch

TouchEvent Touch TouchList EventTarget.addEventListener() Event.preventDefault()