JavaScript Element pointerrawupdate Event

What You’ll Learn

The pointerrawupdate event delivers high-frequency pointer property updates for precision apps. Learn how it differs from pointermove, getCoalescedEvents(), secure-context rules, performance tips, and five try-it labs.

Introduction

Most UIs only need pointermove. Drawing tools, ink, and precision trackers sometimes need every sample the device produces. pointerrawupdate is that higher-frequency path.

MDN recommends it only when coalesced pointermove events are not smooth enough—and warns that listening can hurt performance. For everyday drag and hover, stick with pointermove.

Understanding pointerrawupdate

An instance event that answers: “Did pointer properties change again—possibly faster than a normal pointermove?”

• Same property family as move — not pointerdown / pointerup.
• High frequency — may fire more often than coalesced moves.
• Coalesced samples — check event.getCoalescedEvents().
• Bubbles + composed — not cancelable; no default action.
• Limited availability on MDN (not Baseline)—Safari lacks support.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("pointerrawupdate", (event) => { });

onpointerrawupdate = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties & methods

⚖️ pointerrawupdate vs pointermove

⚡ When (Not) to Listen

• Prefer pointermove unless you truly need extra samples.
• Keep handlers tiny—store points, paint later with requestAnimationFrame.
• Remove listeners when the precision mode ends (do not leave them forever).
• Always provide a pointermove fallback for browsers without support.

🔒 Secure Context

MDN marks pointerrawupdate as available only in secure contexts (HTTPS / localhost) in supporting browsers. Check window.isSecureContext and feature-detect before relying on the event.

Examples Gallery

Examples follow MDN Element: pointerrawupdate event. Use Chrome/Edge/Firefox over HTTPS (or localhost). Safari may show the fallback path.

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const supported = "onpointerrawupdate" in window;

if (!supported) {
  out.textContent = "pointerrawupdate not supported — use pointermove";
} else {
  stage.addEventListener("pointerrawupdate", (event) => {
    out.textContent = "raw @" + event.clientX + "," + event.clientY;
  });
}

raw @112,64

const stage = document.getElementById("stage");
const out = document.getElementById("out");

if ("onpointerrawupdate" in window) {
  stage.onpointerrawupdate = (event) => {
    out.textContent =
      "onpointerrawupdate type=" + event.pointerType +
      " @" + event.clientX + "," + event.clientY;
  };
} else {
  out.textContent = "Handler property missing";
}

onpointerrawupdate type=mouse @96,40

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let rawCount = 0;
let moveCount = 0;

function render() {
  out.textContent =
    "pointerrawupdate=" + rawCount + " pointermove=" + moveCount;
}

if ("onpointerrawupdate" in window) {
  stage.addEventListener("pointerrawupdate", () => {
    rawCount++;
    render();
  });
}

stage.addEventListener("pointermove", () => {
  moveCount++;
  render();
});

pointerrawupdate=86 pointermove=24

const stage = document.getElementById("stage");
const out = document.getElementById("out");

stage.addEventListener("pointerrawupdate", (event) => {
  if (event.getCoalescedEvents && event.getCoalescedEvents().length > 1) {
    const list = event.getCoalescedEvents();
    out.textContent = "Coalesced events: " + list.length;
    // for (const coalescedEvent of list) { /* use each sample */ }
  } else {
    out.textContent = "Raw event @" + event.clientX + "," + event.clientY;
  }
});

Coalesced events: 3

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const canUseRaw =
  window.isSecureContext && ("onpointerrawupdate" in window);

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

if (canUseRaw) {
  stage.addEventListener("pointerrawupdate", (e) => onUpdate(e, "raw"));
} else {
  stage.addEventListener("pointermove", (e) => onUpdate(e, "move-fallback"));
}

raw @140,72

🚀 Common Use Cases

• High-precision drawing, handwriting, and stylus ink.
• Apps that replay every sample via getCoalescedEvents().
• Latency-sensitive tracking where coalesced moves feel choppy.
• Not for everyday drag handles—prefer pointermove.
• Teaching Progressive Enhancement: raw path + move fallback.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• Requires a secure context in supporting browsers.
• Listening can affect performance; use only for high-frequency needs.
• Safari typically lacks support—ship a pointermove fallback.
• Related learning: pointerover, pointerup, pointermove, addEventListener(), JavaScript hub.

💡 Best Practices