Signatur
Beschreibung
Die schreibgeschützte Eigenschaft Touch.identifier gibt eine Zahl zurück, die einen bestimmten Berührungspunkt (z. B. einen Finger) eindeutig kennzeichnet. Der Wert bleibt gleich, solange der Kontakt besteht: vom touchstart über alle touchmove-Ereignisse bis zum touchend bzw. touchcancel.
Gebraucht wird die Eigenschaft vor allem bei Multi-Touch. Die Listen TouchEvent.touches, targetTouches und changedTouches haben keine feste Reihenfolge. Die Position eines Fingers in der Liste sagt also nichts darüber aus, um welchen Finger es sich handelt. Über identifier ordnest du jede Bewegung dem richtigen Finger zu, etwa beim Zeichnen mit mehreren Fingern, bei Pinch-Gesten oder bei virtuellen Joysticks in Spielen.
Mit TouchList.prototype.identifiedTouch() (veraltet, kaum unterstützt) oder einfacher durch Suchen in der Liste per Array.from(list).find(t => t.identifier === id) findest du einen bestimmten Berührungspunkt wieder.
Rückgabewert
Beispiele
Finger beim Start erfassen
const flaeche = document.querySelector('#flaeche');
flaeche.addEventListener('touchstart', (event) => {
for (const touch of event.changedTouches) {
console.log(`Neuer Finger: ID ${touch.identifier} bei (${touch.clientX}, ${touch.clientY})`);
}
}, { passive: true });Multi-Touch-Zeichnen: jeden Finger einzeln verfolgen
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const aktiveFinger = new Map(); // identifier -> letzte Position
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
for (const t of e.changedTouches) {
aktiveFinger.set(t.identifier, { x: t.clientX, y: t.clientY });
}
}, { passive: false });
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
for (const t of e.changedTouches) {
const letzte = aktiveFinger.get(t.identifier);
if (!letzte) continue;
ctx.beginPath();
ctx.moveTo(letzte.x, letzte.y);
ctx.lineTo(t.clientX, t.clientY);
ctx.stroke();
aktiveFinger.set(t.identifier, { x: t.clientX, y: t.clientY });
}
}, { passive: false });
const beenden = (e) => {
for (const t of e.changedTouches) aktiveFinger.delete(t.identifier);
};
canvas.addEventListener('touchend', beenden);
canvas.addEventListener('touchcancel', beenden);Einen bestimmten Finger in der TouchList wiederfinden
let joystickFinger = null;
const joystick = document.querySelector('#joystick');
joystick.addEventListener('touchstart', (e) => {
if (joystickFinger === null) {
joystickFinger = e.changedTouches[0].identifier;
}
}, { passive: true });
document.addEventListener('touchmove', (e) => {
const touch = Array.from(e.touches).find((t) => t.identifier === joystickFinger);
if (touch) {
console.log(`Joystick-Finger bei x=${touch.pageX}`);
}
}, { passive: true });
document.addEventListener('touchend', (e) => {
const beendet = Array.from(e.changedTouches).some((t) => t.identifier === joystickFinger);
if (beendet) joystickFinger = null;
});// Wichtig · Fallstricke
- Keine Indizes: Die IDs beginnen nicht zwingend bei 0 und laufen nicht zwingend fortlaufend. Safari (iOS) vergibt z. B. große, scheinbar zufällige Zahlen. Verwende
identifierdeshalb nie als Array-Index, sondern als Schlüssel in einerMapoder in einem Objekt. - Wiederverwendung: Nach
touchend/touchcancelkann der Browser dieselbe ID für einen neuen Finger vergeben. Entferne beendete IDs daher immer aus deinem Zustand und behandle auchtouchcancel. - Reihenfolge: Die Reihenfolge in
TouchLists ist nicht garantiert. Identifiziere Finger deshalb immer überidentifier, nie über die Position in der Liste. - Kompatibilität: Touch Events gibt es in allen mobilen Browsern und in Chromium-Browsern auf Touch-Geräten. Desktop-Firefox und Desktop-Safari stellen sie ohne Touch-Hardware meist nicht bereit. Für geräteübergreifenden Code bieten sich Pointer Events mit
PointerEvent.pointerIdan, das Gleiche für Maus, Stift und Touch.