JavaScript Element pointerrawupdate Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word POINTERRAWUPDATE

Definition

In JavaScript, the pointerrawupdate event fires when a pointer changes properties that do not produce pointerdown / pointerup (same kind of changes as pointermove) (MDN). Browsers may deliver it more often than pointermove for lower-latency input (drawing, drag that would lag).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for pointerrawupdate. Start with this line.

JavaScript
el.addEventListener("pointerrawupdate", fn)
CallWhat it does
el.addEventListener("pointerrawupdate", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("pointerrawupdate", …) — no import required.

Library declarations
JavaScript
el.addEventListener("pointerrawupdate", fn)

Parameters

ParameterDescription
Feature detectRequired. Limited availability + HTTPS
PointerEventRequired. Coords / type / coalesced samples

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Feature Detect

Check support before building a raw-update path.

JavaScript
const supported = "onpointerrawupdate" in window;
console.log(supported);

if (!supported) {
  console.log("Use pointermove instead");
}
Try It Yourself

How It Works

  1. Check the handler property. A simple existence test for Limited availability.
  2. Branch early. Unsupported browsers should use pointermove.
  3. Remember HTTPS. Secure context can still block the feature.
  4. Don’t polyfill. Fall back — don’t invent fake raw updates.

Example 2 — Listen Safely with Fallback

Use raw updates when available; otherwise pointermove.

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");

function onMove(event) {
  out.textContent = event.clientX + ", " + event.clientY;
}

if ("onpointerrawupdate" in window) {
  pad.addEventListener("pointerrawupdate", onMove);
} else {
  pad.addEventListener("pointermove", onMove);
}
Try It Yourself

How It Works

  1. Share one handler. Same light update for either event type.
  2. Prefer raw only if supported. Avoid attaching an unsupported listener.
  3. Fall back to move. MDN’s default recommendation for most apps.
  4. Keep work tiny. High frequency makes heavy handlers feel worse.

Example 3 — Read getCoalescedEvents()

MDN-style check — process coalesced samples when several are batched.

JavaScript
const pad = document.getElementById("pad");

pad.addEventListener("pointerrawupdate", (event) => {
  if (typeof event.getCoalescedEvents !== "function") {
    console.log("Raw event", event.clientX, event.clientY);
    return;
  }
  const events = event.getCoalescedEvents();
  if (events.length > 1) {
    console.log("Coalesced events:", events.length);
  } else {
    console.log("Raw event", event.clientX, event.clientY);
  }
});
Try It Yourself

How It Works

  1. Listen for raw updates. Only useful in supporting secure contexts.
  2. Call getCoalescedEvents(). May return earlier samples for this dispatch (MDN).
  3. Branch on length. Multiple samples → process each lightly.
  4. Guard the API. Not every engine exposes coalesced helpers the same way.
Compatibility

Browser Support

pointerrawupdate is marked Limited availability on MDN (not Baseline). It also requires a secure context (HTTPS) in supporting browsers. Prefer pointermove unless you need high-frequency low-latency updates.

✓ Limited availability

Element pointerrawupdate

Higher-frequency PointerEvent updates — not Baseline; HTTPS in supporting engines.

Partial Not Baseline
Google Chrome Supported (secure context)
Supported
Mozilla Firefox Supported (secure context)
Supported
Apple Safari Not available (typical)
Unavailable
Microsoft Edge Supported (Chromium)
Supported
Opera Chromium-based paths
Partial
Internet Explorer Not available
Unavailable
pointerrawupdate Limited

Bottom line: Feature-detect and fall back to pointermove. Use raw updates only for drawing/drag latency when the handler can keep up.

Frequently Asked Questions

It fires when a pointer changes properties that do not fire pointerdown or pointerup (the same kind of changes that drive pointermove). MDN: it is for lower-latency handling than pointermove, such as drawing that would otherwise lag.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline) and requires a secure context (HTTPS) in supporting browsers.
No. MDN: a single event carries the same property values either way — pointerrawupdate is not more precise in space or time than the pointermove covering the same movement; it just arrives more often.
Usually no. MDN recommends other pointer event types for most use cases. Prefer pointermove unless you truly need higher-frequency, low-latency updates and can keep up.
If another pointerrawupdate for the same pointerId is still waiting in the event loop, the dispatched event may expose earlier samples via event.getCoalescedEvents() (MDN).
MDN: it bubbles and is composed, but is not cancelable and has no default action.

Next: pointerup

Learn when a pointer contact ends.

pointerup tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element pointerover Event JavaScript Element pointerup Event