Element: pointerrawupdate — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerrawupdate", handler)

Beschreibung

Das Ereignis pointerrawupdate liefert Zeigerdaten (Position, Druck, Neigung, gedrückte Tasten usw.) so schnell wie möglich, sobald das Eingabegerät sie meldet. Das normale pointermove wird dagegen vom Browser gebündelt und in der Regel höchstens einmal pro Frame (ungefähr alle 16 ms bei 60 Hz) zugestellt. pointerrawupdate ist also für Anwendungen gedacht, bei denen die Verzögerung zwischen Eingabe und Reaktion möglichst gering sein soll, etwa Zeichen- und Malprogramme, Handschrifterkennung, Spiele oder Remote-Desktop-Clients.

Der Handler bekommt ein PointerEvent-Objekt mit denselben Eigenschaften wie bei pointermove (clientX, pressure, pointerType, tiltX …). Das Ereignis steigt im DOM auf (bubbles) und lässt sich nicht abbrechen, preventDefault() bewirkt also nichts. Registrieren lässt es sich per addEventListener("pointerrawupdate", …) oder über die Eigenschaft onpointerrawupdate.

Wichtig: Die Rohdaten bringen nur dann einen Vorteil, wenn der Handler sehr schnell ist. Aufwendige Arbeit wie DOM-Änderungen oder Neuzeichnen gehört weiterhin in requestAnimationFrame. Im Handler sammelt man nur die Daten, zum Beispiel für die Vorhersage von Strichen oder zum Versenden über das Netzwerk.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pointerrawupdate"`.
$handler Pflicht	(event: PointerEvent) => void		Callback, das bei jeder Roh-Aktualisierung des Zeigers aufgerufen wird und ein `PointerEvent` erhält.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein PointerEvent.

Beispiele

Rohe Zeigerdaten per addEventListener sammeln

const canvas = document.querySelector('#zeichenflaeche');
const punkte = [];

// Feature-Erkennung mit Rückfall auf pointermove
const eventName = 'onpointerrawupdate' in window ? 'pointerrawupdate' : 'pointermove';

canvas.addEventListener(eventName, (e) => {
  if (e.buttons !== 1) return; // nur bei gedrückter Haupttaste
  punkte.push({ x: e.offsetX, y: e.offsetY, p: e.pressure, t: e.timeStamp });
});

// Gezeichnet wird nur einmal pro Frame
const ctx = canvas.getContext('2d');
const zeichnen = () => {
  while (punkte.length > 1) {
    const [a, b] = punkte;
    ctx.lineWidth = 1 + b.p * 8;
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.stroke();
    punkte.shift();
  }
  requestAnimationFrame(zeichnen);
};
requestAnimationFrame(zeichnen);
console.log('Verwendetes Ereignis:', eventName);

Verwendetes Ereignis: pointerrawupdate

Frequenz von pointerrawupdate und pointermove vergleichen

const zaehler = { pointerrawupdate: 0, pointermove: 0 };
const zaehlen = (e) => { zaehler[e.type]++; };

document.addEventListener('pointerrawupdate', zaehlen);
document.addEventListener('pointermove', zaehlen);

setInterval(() => {
  console.log(`raw: ${zaehler.pointerrawupdate}/s, move: ${zaehler.pointermove}/s`);
  zaehler.pointerrawupdate = 0;
  zaehler.pointermove = 0;
}, 1000);

raw: 250/s, move: 60/s (Beispielwerte, abhängig von Maus bzw. Stift und Bildschirm)

on-Property nutzen und Listener wieder entfernen

const ziel = document.querySelector('#spielfeld');

// Variante 1: on-Property
ziel.onpointerrawupdate = (e) => {
  console.log(e.pointerType, e.clientX, e.clientY);
};
// Entfernen:
ziel.onpointerrawupdate = null;

// Variante 2: Entfernen per AbortController
const controller = new AbortController();
ziel.addEventListener('pointerrawupdate', (e) => {
  console.log('Roh:', e.clientX, e.clientY);
}, { signal: controller.signal });

// z. B. wenn das Spiel pausiert
controller.abort();

mouse 312 208

// Wichtig · Fallstricke

Browserunterstützung: Nur Chromium-basierte Browser (Chrome, Edge, Opera ab Version 77) unterstützen das Ereignis vollständig. Firefox bietet es erst in neueren Versionen an, Safari gar nicht. Vorher per 'onpointerrawupdate' in window prüfen und bei Bedarf auf pointermove ausweichen.
Nur in sicheren Kontexten: Laut Spezifikation steht das Ereignis nur unter HTTPS bzw. localhost zur Verfügung.
Performance: Allein das Registrieren eines Listeners kann die Leistung der Seite verschlechtern, weil der Browser dann jede Roh-Eingabe zustellen muss. Registrieren Sie das Ereignis nur, wenn Sie es wirklich brauchen, und entfernen Sie den Listener wieder. Im Handler keine teuren Operationen ausführen, Rendering gehört in requestAnimationFrame.
Nicht abbrechbar: preventDefault() hat keine Wirkung. Um Scrollen oder Gesten zu unterdrücken, verwenden Sie CSS touch-action oder behandeln pointerdown.
Zu jedem pointerrawupdate folgt später trotzdem ein (gebündeltes) pointermove. Wer beide Ereignisse behandelt, sollte Daten nicht doppelt verarbeiten.

Siehe auch

Element: pointerleave Element: pointerout Element: pointerup Element: pointercancel Element: pointerdown