new Touch() — Methode · JavaScript-Referenz

Signatur

new Touch(touchInit)

Beschreibung

Mit new Touch() lässt sich ein Touch-Objekt von Hand erzeugen. Ein solches Objekt steht für einen Kontaktpunkt (Finger, Stift) und enthält Koordinaten, Kontaktfläche, Druck und das Zielelement. Normalerweise erzeugt der Browser diese Objekte selbst und stellt sie über TouchEvent.touches, targetTouches und changedTouches bereit.

Den Konstruktor braucht man vor allem, um synthetische Touch-Ereignisse zu bauen: für automatisierte Tests von Wisch- oder Pinch-Gesten, für Demos oder um Touch-Bibliotheken ohne echtes Gerät auszuprobieren. Die erzeugten Touch-Objekte übergibt man anschließend an den Konstruktor new TouchEvent() und löst das Ereignis mit dispatchEvent() aus.

Pflicht sind nur identifier und target. Alle anderen Felder sind optional und haben Standardwerte (meist 0). Über denselben identifier in aufeinanderfolgenden Ereignissen (touchstart → touchmove → touchend) erkennt der Code, dass es sich um denselben Finger handelt.

Wichtig: Synthetische Ereignisse haben isTrusted === false. Sie lösen also keine Standardaktionen des Browsers aus, etwa Scrollen, Zoomen oder einen nachgelagerten click.

Parameter

Name	Typ	Default	Beschreibung
$touchInit Pflicht	Object (TouchInit)		Konfigurationsobjekt mit den unten aufgeführten Eigenschaften.
$touchInit.identifier Pflicht	number		Eindeutige ID des Berührungspunkts. Sie bleibt gleich, solange der Kontakt besteht.
$touchInit.target Pflicht	EventTarget		Element, auf dem die Berührung begonnen hat.
$touchInit.clientX / clientY	number	0	Position relativ zum Viewport, in CSS-Pixeln.
$touchInit.pageX / pageY	number	0	Position relativ zum Dokument, Scrollversatz eingerechnet.
$touchInit.screenX / screenY	number	0	Position relativ zum Bildschirm.
$touchInit.radiusX / radiusY	number	0	Halbachsen der Ellipse, die die Kontaktfläche annähert.
$touchInit.rotationAngle	number	0	Drehwinkel der Kontaktellipse in Grad (0–90).
$touchInit.force	number	0	Druckstärke zwischen `0.0` und `1.0`.
$touchInit.altitudeAngle / azimuthAngle	number		Neigung und Ausrichtung eines Stifts im Bogenmaß. Experimentell und nicht überall unterstützt.
$touchInit.touchType	"direct" \| "stylus"	"direct"	Art der Eingabe: Finger (`direct`) oder Stift (`stylus`). Experimentell.

Rückgabewert

Typ

Touch

Beschreibung

Ein neues, unveränderliches Touch-Objekt mit den übergebenen Werten.

Beispiele

Einfaches Touch-Objekt erzeugen

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

const touch = new Touch({
  identifier: 1,
  target: box,
  clientX: 120,
  clientY: 80,
  radiusX: 10,
  radiusY: 10,
  force: 0.5
});

console.log(touch.identifier, touch.clientX, touch.clientY, touch.force);
console.log(touch.target === box);

1 120 80 0.5 true

Synthetischen Tipp mit TouchEvent auslösen

const button = document.querySelector('#tap-me');

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

const touch = new Touch({ identifier: Date.now(), target: button, clientX: 50, clientY: 20 });

button.dispatchEvent(new TouchEvent('touchstart', {
  bubbles: true,
  cancelable: true,
  touches: [touch],
  targetTouches: [touch],
  changedTouches: [touch]
}));

touchstart bei 50/20, trusted: false

Wischgeste für Tests simulieren

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

const fire = (type, x) => {
  const touch = new Touch({ identifier: 42, target: slider, clientX: x, clientY: 100 });
  const list = type === 'touchend' ? [] : [touch];
  slider.dispatchEvent(new TouchEvent(type, {
    bubbles: true,
    cancelable: true,
    touches: list,
    targetTouches: list,
    changedTouches: [touch]
  }));
};

const swipeLeft = async () => {
  fire('touchstart', 300);
  for (let x = 280; x >= 60; x -= 20) {
    await new Promise((r) => setTimeout(r, 16)); // ca. 60 fps
    fire('touchmove', x);
  }
  fire('touchend', 60);
};

swipeLeft();

Unterstützung prüfen

const supportsTouchCtor = (() => {
  try {
    new Touch({ identifier: 0, target: document.body });
    return true;
  } catch {
    return false;
  }
})();

console.log('Touch()-Konstruktor verfügbar:', supportsTouchCtor);

Touch()-Konstruktor verfügbar: true

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-Browser (Chrome, Edge, Opera) unterstützen den Konstruktor. In Safari bzw. WebKit gibt es ihn nicht. In Firefox sind Touch-Events auf dem Desktop oft deaktiviert, sodass Touch dort nicht definiert ist. Deshalb die Unterstützung vorher mit try/catch prüfen.
Fehlt identifier oder target, wirft der Konstruktor einen TypeError.
Synthetische Ereignisse haben isTrusted === false und lösen keine Standardaktionen aus (kein Scrollen, kein Zoomen, kein nachfolgender click). Für echte Gerätesimulation eignen sich Werkzeuge wie die Chrome DevTools, Puppeteer oder Playwright besser.
Das veraltete document.createTouch() sollte man nicht mehr verwenden. Es wurde aus den meisten Browsern entfernt.
Für neue Anwendungen sind meist PointerEvents die bessere Wahl, weil sie Maus, Stift und Touch einheitlich behandeln.
Die Eigenschaften eines Touch-Objekts sind schreibgeschützt. Für neue Koordinaten muss ein neues Objekt erzeugt werden.

Siehe auch

Touch TouchEvent TouchList new TouchEvent() EventTarget.prototype.dispatchEvent() PointerEvent new CSSMathProduct()