JavaScript Element pointermove Event

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

Definition

In JavaScript, the pointermove event fires when a pointer changes coordinates (and is not canceled by a browser touch-action) (MDN). It is a PointerEvent — similar to mousemove, but for mouse, touch, and pen.

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

Syntax

Listen for pointermove. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element listening for moves
PointerEventRequired. Position, type, pressure, buttons

Return Value

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

JavaScript Examples

Example 1 — Listen for pointermove

MDN-style listener — log when the pointer moves over the element.

JavaScript
const para = document.querySelector("p");

para.addEventListener("pointermove", (event) => {
  console.log("Pointer moved");
});
Try It Yourself

How It Works

  1. Select the target. Any Element can listen for pointermove.
  2. Add the listener. Use addEventListener or onpointermove.
  3. Move over it. Mouse, touch, or pen all can fire the event.
  4. Expect many calls. Keep the body of the handler small.

Example 2 — Read Coordinates

Show clientX and clientY while the pointer moves.

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

box.addEventListener("pointermove", (event) => {
  out.textContent = event.clientX + ", " + event.clientY;
});
Try It Yourself

How It Works

  1. Listen on a pad. Moves over that element fire the handler.
  2. Read clientX / clientY. Viewport coordinates from the PointerEvent.
  3. Update text only. Cheap DOM text updates are fine at high rates.
  4. No button needed. Hover movement still updates the values.

Example 3 — Read pointerType

See whether the move came from mouse, touch, or pen.

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

box.addEventListener("pointermove", (event) => {
  out.textContent =
    event.pointerType +
    " @ " +
    event.clientX +
    "," +
    event.clientY;
});
Try It Yourself

How It Works

  1. Use one listener. Pointer Events unify mouse, touch, and pen.
  2. Read pointerType. Common values: "mouse", "touch", "pen".
  3. Combine with coords. Useful for logging or device-specific UI hints.
  4. Prefer this over separate mouse + touch move handlers for new apps.
Compatibility

Browser Support

Element pointermove is Baseline Widely available on MDN (since July 2020). Pointer Events work across modern evergreen browsers.

✓ Baseline · Widely available

Element pointermove

PointerEvent when a pointer changes coordinates — mouse, touch, and pen.

96% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
pointermove Excellent

Bottom line: Safe for modern web apps. Prefer pointermove for unified movement tracking. Keep handlers light; use pointerrawupdate only when raw frequency is required.

Frequently Asked Questions

It fires when a pointer changes coordinates and has not been canceled by a browser touch-action (MDN). It can also fire when other pointer properties change if that change does not produce another pointer event.
No. MDN marks Element pointermove as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent (inherits from Event). Useful fields include pointerId, pointerType, pressure, clientX/clientY, and movementX/movementY.
No. MDN notes these events happen whether or not any pointer buttons are pressed—so mouse hover moves still fire pointermove.
It can fire at a very high rate depending on how fast the user moves, how fast the machine is, and what else is running. Keep handlers light or throttle heavy work.
Usually no. MDN: prefer pointermove for most cases. Browsers may delay pointermove for performance, while pointerrawupdate fires as often as possible and can hurt performance.

Next: pointerout

Learn when the pointer leaves an element (bubbling).

pointerout 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 pointerleave Event JavaScript Element pointerout Event