JavaScript Element mousemove Event

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

Definition

In JavaScript, the mousemove event fires when a pointing device moves while its hotspot is inside the element (MDN). It fires whether or not any buttons are pressed — and it can fire at a very high rate. The event type is a MouseEvent.

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

Syntax

Listen for mousemove. Start with this line.

JavaScript
element.addEventListener("mousemove", (event) => { … })
CallWhat it does
element.addEventListener("mousemove", (event) => { … })Primary signature.

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

Library declarations
JavaScript
element.addEventListener("mousemove", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "mousemove"
Handler propOptional. onmousemove

Return Value

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

JavaScript Examples

Example 1 — Log Coordinates

Show clientX / clientY as the pointer moves.

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

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

How It Works

  1. Listen for mousemove. Fires as the pointer moves inside.
  2. Read viewport coords. clientX / clientY are relative to the viewport.
  3. Update a label. Keep the write tiny — this fires often.
  4. No button required. Movement alone is enough.

Example 2 — Track Only While Dragging (MDN idea)

Start on mousedown, update on move, stop on mouseup.

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

stage.addEventListener("mousedown", () => {
  dragging = true;
  out.textContent = "dragging…";
});

stage.addEventListener("mousemove", (event) => {
  if (!dragging) return;
  out.textContent = "drag @ " + event.offsetX + ", " + event.offsetY;
});

window.addEventListener("mouseup", () => {
  if (!dragging) return;
  dragging = false;
  out.textContent = "idle";
});
Try It Yourself

How It Works

  1. Set a flag on press. Only then treat moves as a drag.
  2. Guard the move handler. Skip work when not dragging.
  3. Use offsetX/offsetY. Coords relative to the stage.
  4. Stop on window mouseup. MDN-style — works even if release is outside.

Example 3 — See How Often It Fires

Count moves to feel the high event rate.

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

stage.addEventListener("mousemove", () => {
  count += 1;
  out.textContent = "moves: " + count;
});
Try It Yourself

How It Works

  1. Increment on every move. Numbers climb quickly.
  2. Lesson from MDN. Rate depends on mouse speed and machine load.
  3. Implication. Avoid heavy DOM or network work per event.
  4. Fix. Throttle, or only act while dragging.
Compatibility

Browser Support

Element mousemove is Baseline Widely available (MDN: since July 2015). Safe for mouse tracking and drag demos in modern and older evergreen browsers.

✓ Baseline · Widely available

Element mousemove

MouseEvent when the pointer moves inside an element — long-established across browsers.

99% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
mousemove Baseline

Bottom line: Keep handlers light. Gate drag work behind mousedown/mouseup. Prefer pointermove when you need touch/pen too.

Frequently Asked Questions

It fires when a pointing device moves while its hotspot is inside the element (MDN). It can fire whether or not any mouse buttons are pressed.
No. MDN marks Element mousemove as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent. Useful fields include clientX, clientY, offsetX, offsetY, movementX, movementY, and buttons.
It can fire at a very high rate depending on mouse speed, machine speed, and other work (MDN). Keep handlers light, throttle updates, or only track while dragging.
Use mousedown to start, mousemove to draw while a flag is true, and mouseup (often on window) to stop — the MDN canvas pattern.
For unified mouse/touch/pen tracking, pointermove plus setPointerCapture is often a better modern model. mousemove remains widely used for mouse-only demos.

Next: mouseout

Learn the bubbling leave event and how it differs from mouseleave.

mouseout 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 mouseleave Event JavaScript Element mouseout Event