Signatur
interface TouchEvent extends UIEvent
Beschreibung
TouchEvent ist ein UIEvent, das der Browser bei Änderungen von Fingerberührungen auf Touchscreens oder Trackpads auslöst. Es gibt vier Ereignistypen: touchstart (Finger setzt auf), touchmove (Finger bewegt sich), touchend (Finger wird abgehoben) und touchcancel (das System bricht die Berührung ab, z. B. bei einem eingehenden Anruf oder zu vielen Kontaktpunkten).
Jedes Ereignis enthält drei TouchList-Sammlungen mit Touch-Objekten:
touches– alle Kontaktpunkte, die gerade auf der Oberfläche liegen,targetTouches– alle Kontaktpunkte, die auf dem Zielelement des Ereignisses begonnen haben,changedTouches– die Kontaktpunkte, die sich durch genau dieses Ereignis geändert haben (beitouchenddie einzige Liste, in der der abgehobene Finger noch steht).
Außerdem gibt es die Modifikatortasten-Eigenschaften altKey, ctrlKey, metaKey und shiftKey. Jedes Touch-Objekt liefert u. a. identifier, clientX/clientY, pageX/pageY, target, radiusX/radiusY und force.
TouchEvent braucht man für Gesten mit mehreren Fingern (Pinch-Zoom, Drehen), Wischgesten und für eigene Scroll- oder Zeichenflächen. Für neuen Code, der Maus, Stift und Touch gleich behandeln soll, sind die Pointer Events meist die bessere Wahl.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Konstruktor-Parameter: Name des Ereignisses, z. B. "touchstart", "touchmove", "touchend" oder "touchcancel". |
|
| $options | TouchEventInit | {} | Konstruktor-Optionen: touches, targetTouches, changedTouches (jeweils Touch[], Standard []), altKey, ctrlKey, metaKey, shiftKey (boolean) sowie die UIEventInit-/EventInit-Felder wie bubbles, cancelable, view. |
Rückgabewert
Typ
TouchEvent
Beschreibung
new TouchEvent(type, options) erzeugt ein neues TouchEvent-Objekt, das man mit dispatchEvent() auslösen kann. Solche selbst erzeugten Ereignisse haben isTrusted === false.Beispiele
Wischgeste nach links/rechts erkennen
const slider = document.querySelector('#slider');
let startX = 0;
let startY = 0;
slider.addEventListener('touchstart', (event) => {
const touch = event.changedTouches[0];
startX = touch.clientX;
startY = touch.clientY;
}, { passive: true });
slider.addEventListener('touchend', (event) => {
// Bei touchend steht der abgehobene Finger nur in changedTouches
const touch = event.changedTouches[0];
const dx = touch.clientX - startX;
const dy = touch.clientY - startY;
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
console.log(dx < 0 ? 'Wisch nach links' : 'Wisch nach rechts');
}
});Wisch nach links
Pinch-Zoom mit zwei Fingern
const bild = document.querySelector('#bild');
let startAbstand = 0;
let skalierung = 1;
const abstand = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
bild.addEventListener('touchstart', (event) => {
if (event.touches.length === 2) {
startAbstand = abstand(event.touches[0], event.touches[1]);
}
});
// passive: false, damit preventDefault() das native Zoomen verhindert
bild.addEventListener('touchmove', (event) => {
if (event.touches.length !== 2) return;
event.preventDefault();
const aktuell = abstand(event.touches[0], event.touches[1]);
const faktor = Math.min(Math.max(skalierung * (aktuell / startAbstand), 0.5), 4);
bild.style.transform = `scale(${faktor})`;
}, { passive: false });
bild.addEventListener('touchend', () => {
const match = bild.style.transform.match(/scale\(([\d.]+)\)/);
if (match) skalierung = Number(match[1]);
});Mehrere Finger per identifier verfolgen und Listener entfernen
const flaeche = document.querySelector('#zeichenflaeche');
const aktiveFinger = new Map();
const onStart = (event) => {
for (const touch of event.changedTouches) {
aktiveFinger.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
}
console.log(`Aktive Finger: ${aktiveFinger.size}`);
};
const onEnde = (event) => {
for (const touch of event.changedTouches) {
aktiveFinger.delete(touch.identifier);
}
console.log(`Aktive Finger: ${aktiveFinger.size}`);
};
flaeche.addEventListener('touchstart', onStart, { passive: true });
flaeche.addEventListener('touchend', onEnde);
flaeche.addEventListener('touchcancel', onEnde); // Abbruch ebenso behandeln
// Später aufräumen
const aufraeumen = () => {
flaeche.removeEventListener('touchstart', onStart, { passive: true });
flaeche.removeEventListener('touchend', onEnde);
flaeche.removeEventListener('touchcancel', onEnde);
};Aktive Finger: 1
Aktive Finger: 2
Aktive Finger: 1
Feature-Erkennung und synthetisches TouchEvent
const unterstuetztTouch = 'ontouchstart' in window && typeof Touch === 'function';
if (unterstuetztTouch) {
const ziel = document.querySelector('#knopf');
ziel.ontouchstart = (e) => console.log('touchstart, echt?', e.isTrusted);
const touch = new Touch({
identifier: 1,
target: ziel,
clientX: 100,
clientY: 50,
});
const event = new TouchEvent('touchstart', {
touches: [touch],
targetTouches: [touch],
changedTouches: [touch],
bubbles: true,
cancelable: true,
});
ziel.dispatchEvent(event);
} else {
console.log('Keine Touch-Unterstützung – Pointer Events verwenden');
}touchstart, echt? false