new TouchEvent() — Methode · JavaScript-Referenz

Signatur

new TouchEvent(type, options)

Beschreibung

Mit dem Konstruktor TouchEvent() erzeugen Sie ein Touch-Ereignis wie touchstart, touchmove, touchend oder touchcancel selbst im Code. Das Objekt wird danach mit element.dispatchEvent(event) ausgelöst und erreicht alle registrierten Listener genauso wie ein echtes Ereignis, das vom Touchscreen kommt.

Typische Einsatzfälle sind automatisierte Tests von Wisch- und Tipp-Logik (z. B. Karussells, Swipe-to-Delete, Zeichenflächen), Polyfills und das Weiterleiten von Eingaben an andere Komponenten. Die einzelnen Berührungspunkte beschreiben Sie mit Touch-Objekten, die Sie über new Touch({...}) anlegen und in die Listen touches, targetTouches und changedTouches einsortieren.

Wichtig: Selbst erzeugte Ereignisse haben isTrusted === false. Standardaktionen des Browsers (Scrollen, Zoomen, daraus abgeleitete click- oder Mausereignisse) werden dadurch nicht ausgelöst. Nur Ihre eigenen Listener reagieren. Damit Delegation über übergeordnete Elemente funktioniert, müssen Sie bubbles: true setzen. Damit preventDefault() Wirkung zeigt, brauchen Sie cancelable: true.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, z. B. `"touchstart"`, `"touchmove"`, `"touchend"` oder `"touchcancel"`. Groß- und Kleinschreibung wird beachtet.
$options	TouchEventInit	{}	Konfigurationsobjekt. Es erbt die Felder von `EventInit` (`bubbles`, `cancelable`, `composed`) und `UIEventInit` (`view`, `detail`).
$options.touches	Touch[]	[]	Alle Berührungspunkte, die sich gerade auf der Oberfläche befinden.
$options.targetTouches	Touch[]	[]	Die Berührungspunkte, die auf dem Ziel-Element begonnen haben und sich noch darauf befinden.
$options.changedTouches	Touch[]	[]	Die Berührungspunkte, die sich mit diesem Ereignis geändert haben (bei `touchend` die gerade losgelassenen).
$options.ctrlKey	boolean	false	Gibt an, ob die Strg-Taste gedrückt war.
$options.shiftKey	boolean	false	Gibt an, ob die Umschalttaste gedrückt war.
$options.altKey	boolean	false	Gibt an, ob die Alt-Taste gedrückt war.
$options.metaKey	boolean	false	Gibt an, ob die Meta-Taste (Cmd bzw. Windows-Taste) gedrückt war.
$options.bubbles	boolean	false	Legt fest, ob das Ereignis im DOM nach oben weitergereicht wird. Für Ereignis-Delegation muss der Wert `true` sein.
$options.cancelable	boolean	false	Legt fest, ob `preventDefault()` das Ereignis abbrechen kann.
$options.composed	boolean	false	Legt fest, ob das Ereignis die Grenze eines Shadow DOM überschreitet.

Rückgabewert

Typ

TouchEvent

Beschreibung

Ein neues TouchEvent-Objekt, das noch nicht ausgelöst wurde. Es muss mit dispatchEvent() auf ein Ziel geschickt werden.

Beispiele

Einfaches Tippen auf einen Button simulieren

const button = document.querySelector('#like');

button.addEventListener('touchstart', (e) => {
  const t = e.changedTouches[0];
  console.log(`touchstart bei ${t.clientX}/${t.clientY}`);
});

const touch = new Touch({
  identifier: 1,
  target: button,
  clientX: 40,
  clientY: 20
});

const event = new TouchEvent('touchstart', {
  touches: [touch],
  targetTouches: [touch],
  changedTouches: [touch],
  bubbles: true,
  cancelable: true
});

button.dispatchEvent(event);
console.log(event.isTrusted);

touchstart bei 40/20 false

Wischgeste nach links für einen Karussell-Test

const slider = document.querySelector('.carousel');

const makeTouch = (x, y) => new Touch({
  identifier: 42,
  target: slider,
  clientX: x,
  clientY: y,
  pageX: x,
  pageY: y
});

const fire = (type, touch) => {
  const active = type === 'touchend' ? [] : [touch];
  slider.dispatchEvent(new TouchEvent(type, {
    touches: active,
    targetTouches: active,
    changedTouches: [touch],
    bubbles: true,
    cancelable: true
  }));
};

const swipeLeft = async () => {
  fire('touchstart', makeTouch(300, 100));
  for (let x = 280; x >= 100; x -= 20) {
    fire('touchmove', makeTouch(x, 100));
    await new Promise((r) => requestAnimationFrame(r));
  }
  fire('touchend', makeTouch(100, 100));
};

await swipeLeft();

Funktionsprüfung vor dem Erzeugen

const supportsTouchCtor = () => {
  try {
    new TouchEvent('touchstart');
    return typeof Touch === 'function';
  } catch {
    return false;
  }
};

if (supportsTouchCtor()) {
  console.log('TouchEvent und Touch sind verfügbar');
} else {
  // Fallback: Pointer Events simulieren
  document.body.dispatchEvent(new PointerEvent('pointerdown', {
    pointerType: 'touch',
    clientX: 10,
    clientY: 10,
    bubbles: true
  }));
  console.log('Fallback auf PointerEvent');
}

TouchEvent und Touch sind verfügbar

Siehe auch

new FetchEvent() new MouseEvent() new PushEvent() new TrackEvent() new FocusEvent() new AnimationPlaybackEvent() new CSSSkewY()