JavaScript Element pointermove Event

What You’ll Learn

The pointermove event fires when a pointer changes coordinates (and is not canceled by touch-action). Learn addEventListener vs onpointermove, how it compares to mousemove, high fire-rate tips, drag with setPointerCapture, and five try-it labs.

Introduction

pointermove answers: “Did this pointer change position?” It is the unified cousin of mousemove—with extra fields for touch contact size, pen pressure, and pointer identity.

MDN notes moves fire whether or not buttons are pressed, and they can arrive at a very high rate. Keep handlers light, or throttle expensive work (drawing, layout, network).

Understanding pointermove

An instance event that answers: “Did the pointer’s coordinates change?”

• Coordinates — fires when the pointer moves (hover or pressed).
• touch-action — browser gestures can cancel delivery of moves.
• High rate — expect many events during a fast swipe or mouse glide.
• vs mousemove — similar timing for mouse; PointerEvent adds id, type, pressure, etc.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

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

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

onpointermove = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

⚖️ pointermove vs mousemove

⚡ High Fire Rate Tips

• Do not write to the DOM on every move if you can update once per animation frame.
• Prefer reading clientX / clientY (or deltas) and batch paint work with requestAnimationFrame.
• For drag, call setPointerCapture on pointerdown so moves keep targeting your handle.
• Always clear drag state on pointerup and pointercancel.

Examples Gallery

Examples follow MDN Element: pointermove event. Move a mouse, pen, or finger over the stage elements.

const para = document.querySelector("p");
const out = document.getElementById("out");

para.addEventListener("pointermove", (event) => {
  out.textContent = "Pointer moved";
});

Pointer moved

const para = document.querySelector("p");
const out = document.getElementById("out");

para.onpointermove = (event) => {
  out.textContent = "onpointermove at " + event.clientX + "," + event.clientY;
};

onpointermove at 96,42

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

stage.addEventListener("pointermove", (event) => {
  count++;
  out.textContent =
    "x=" + event.clientX +
    " y=" + event.clientY +
    " moves=" + count;
});

x=140 y=68 moves=37

const handle = document.getElementById("handle");
const out = document.getElementById("out");
let dragging = false;

handle.addEventListener("pointerdown", (event) => {
  dragging = true;
  handle.setPointerCapture(event.pointerId);
  handle.classList.add("is-dragging");
});

handle.addEventListener("pointermove", (event) => {
  if (!dragging) return;
  out.textContent = "drag @" + event.clientX + "," + event.clientY;
});

function endDrag() {
  dragging = false;
  handle.classList.remove("is-dragging");
  out.textContent = "idle";
}

handle.addEventListener("pointerup", endDrag);
handle.addEventListener("pointercancel", endDrag);

drag @180,90

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

stage.addEventListener("pointermove", (event) => {
  out.textContent =
    "type=" + event.pointerType +
    " pressure=" + event.pressure.toFixed(2) +
    " buttons=" + event.buttons;
});

type=mouse pressure=0.00 buttons=0

🚀 Common Use Cases

• Drag, resize, and draw tools for mouse, touch, and pen.
• Follow-cursor UI (crosshairs, tooltips that track position).
• Read pressure / tilt for stylus drawing apps.
• Combine with setPointerCapture so moves stay on your control.
• Replace mouse-only mousemove when you need one code path for all pointers.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Fires with or without buttons pressed; rate can be very high.
• Browser touch-action can prevent move delivery for that contact.
• For drag, pair pointerdown capture with pointerup / pointercancel cleanup.
• Related learning: pointerleave, pointerout, pointerdown, addEventListener(), JavaScript hub.

💡 Best Practices