Signatur
Beschreibung
Die schreibgeschützte Eigenschaft pointerId liefert einen numerischen Bezeichner für den Zeiger, der das Ereignis ausgelöst hat. Der Browser vergibt diese Kennung beim ersten Kontakt, etwa bei pointerdown eines Fingers, und behält sie bei, solange der Zeiger aktiv ist. Alle Ereignisse desselben Zeigers (pointerdown, pointermove, pointerup, pointercancel) tragen also dieselbe pointerId.
Man braucht die Eigenschaft vor allem bei Multitouch und bei Eingaben mit mehreren Zeigern gleichzeitig. Legen zwei Finger gleichzeitig auf, kann man ihre Bewegungen nur über pointerId auseinanderhalten, zum Beispiel für Pinch-Zoom, Zeichen-Apps oder Spiele. Außerdem erwarten die Methoden Element.setPointerCapture(), releasePointerCapture() und hasPointerCapture() eine pointerId als Argument.
Der Wert selbst hat keine Bedeutung. Man darf nicht davon ausgehen, dass er bei 0 oder 1 beginnt, fortlaufend hochgezählt wird oder über Sitzungen gleich bleibt. Die Maus hat in der Regel eine feste Kennung (in Chrome oft 1). Touch-Kontakte bekommen dagegen bei jeder neuen Berührung eine neue Kennung.
Rückgabewert
long), die den Zeiger für die Dauer seiner Aktivität eindeutig kennzeichnet. Nicht vertrauenswürdige, per Skript erzeugte Ereignisse haben standardmäßig den Wert 0.Beispiele
pointerId beim Antippen ausgeben
const flaeche = document.querySelector('#flaeche');
flaeche.addEventListener('pointerdown', (event) => {
console.log(`Zeiger ${event.pointerId} (${event.pointerType}) gedrückt`);
});Multitouch: mehrere Finger gleichzeitig verfolgen
const aktiveZeiger = new Map();
const canvas = document.querySelector('canvas');
canvas.style.touchAction = 'none'; // Browser-Scrollen/-Zoomen unterbinden
canvas.addEventListener('pointerdown', (e) => {
aktiveZeiger.set(e.pointerId, { x: e.clientX, y: e.clientY });
console.log('Aktive Zeiger:', aktiveZeiger.size);
});
canvas.addEventListener('pointermove', (e) => {
if (!aktiveZeiger.has(e.pointerId)) return;
aktiveZeiger.set(e.pointerId, { x: e.clientX, y: e.clientY });
});
const entfernen = (e) => {
aktiveZeiger.delete(e.pointerId);
console.log('Aktive Zeiger:', aktiveZeiger.size);
};
canvas.addEventListener('pointerup', entfernen);
canvas.addEventListener('pointercancel', entfernen);Pointer Capture für einen Schieberegler
const griff = document.querySelector('.regler-griff');
griff.addEventListener('pointerdown', (e) => {
// Alle weiteren Ereignisse dieses Zeigers gehen an den Griff
griff.setPointerCapture(e.pointerId);
});
griff.addEventListener('pointermove', (e) => {
if (!griff.hasPointerCapture(e.pointerId)) return;
griff.style.transform = `translateX(${e.offsetX}px)`;
});
griff.addEventListener('pointerup', (e) => {
griff.releasePointerCapture(e.pointerId);
});// Wichtig · Fallstricke
- Keine Annahmen über den Wert: Verlassen Sie sich nicht auf bestimmte Zahlen, feste Wertebereiche oder fortlaufende Vergabe. Die Kennungen unterscheiden sich je nach Browser und Gerät. Aus Datenschutzgründen dürfen Browser sie außerdem zufällig vergeben, damit sich darüber kein Fingerabdruck erstellen lässt.
- Kennungen werden wiederverwendet: Nach
pointerupoderpointercancelkann der Browser dieselbe Kennung für einen neuen Kontakt vergeben. Entfernen Sie Einträge deshalb immer bei beiden Ereignissen aus Ihren Zuordnungen, sonst bleiben verwaiste Zustände zurück. - Ungültige Kennung:
setPointerCapture()wirft eineNotFoundError-DOMException, wenn die übergebenepointerIdzu keinem aktiven Zeiger gehört. - Touch und Scrollen: Ohne
touch-action: none(oder einen passenden Wert) übernimmt der Browser Gesten selbst und löstpointercancelaus. - Browser-Unterstützung: Wird in allen aktuellen Browsern unterstützt. Safari kann Pointer Events erst seit Version 13 (2019).