HTML onmousemove Attribute

Introduction

The onmousemove attribute is an inline event handler for the mousemove event. It runs JavaScript repeatedly while the mouse pointer moves over an element. Use it to track coordinates, draw on a canvas, move a tooltip, or update a slider preview. Pass event to read clientX and clientY. It is not the same as onmouseover (pointer enters) — mousemove fires on every small movement while inside the element. Because it can fire dozens of times per second, keep handler code light or throttle it.

What You’ll Learn

Purpose of onmousemove Attribute

The primary purpose of onmousemove is to react to continuous pointer movement over an element. Common uses include live coordinate readouts, custom cursors, drawing apps, image magnifiers, and drag operations (often paired with onmousedown on the same element or document).

The event bubbles, so a handler on a parent can receive movements from children — but the handler only runs while the pointer is over elements in that subtree (unless you attach to document during a drag).

📝 Syntax

Set onmousemove on any element that should track movement:

<div onmousemove="trackMouse(event)">
  Move the mouse here
</div>

<canvas width="400" height="200" onmousemove="draw(event)"></canvas>

Syntax Rules

• Value is JavaScript executed on each mousemove while over the element.
• Works on most elements: div, canvas, button, etc.
• Pass event for clientX, clientY, offsetX, offsetY.
• Fires only while the pointer is inside the element (unless listening on document).
• The event bubbles up the DOM tree.
• Modern alternative: el.addEventListener("mousemove", handler).
• Pair with onmouseleave or onmouseout to reset UI when pointer exits.

💎 Values

The onmousemove attribute accepts a string of JavaScript code:

• onmousemove="trackMouse(event)" — Pass the event object.
• onmousemove="updateCoords(event.clientX, event.clientY)" — Pass coordinates.
• JavaScript: box.onmousemove = (e) => { … } — property assignment.

area.addEventListener("mousemove", (event) => {
  // Viewport coordinates
  const x = event.clientX;
  const y = event.clientY;
  // Relative to the target element
  const localX = event.offsetX;
  const localY = event.offsetY;
  label.textContent = `X: ${x}, Y: ${y} (local: ${localX}, ${localY})`;
});

Applicable Elements

onmousemove vs onmouseover vs onmouseenter

Examples Gallery

Track coordinates inline, addEventListener on a zone, and read offsetX/offsetY relative to the box.

<div onmousemove="trackMouse(event)">
  Move the mouse over this box.
</div>
<p id="output"></p>

<script>
  function trackMouse(event) {
    document.getElementById("output").textContent =
      "Mouse coordinates: X = " + event.clientX +
      ", Y = " + event.clientY;
  }
</script>

<div id="dynamicElement">Hover over me!</div>

<script>
  document.getElementById("dynamicElement").addEventListener("mousemove", function (event) {
    this.textContent = "X: " + event.clientX + ", Y: " + event.clientY;
  });
</script>

zone.addEventListener("mousemove", (event) => {
  dot.style.left = event.offsetX + "px";
  dot.style.top = event.offsetY + "px";
  label.textContent =
    "Local: " + event.offsetX + ", " + event.offsetY;
});

♿ Accessibility

• Do not require mouse movement — Provide keyboard or touch alternatives for any feature triggered only by mousemove.
• Avoid motion-only UI — Users with motor difficulties may struggle with precision tracking.
• Respect reduced motion — Check prefers-reduced-motion before animating elements that follow the cursor.
• Keep targets large enough — Small tracking zones are hard to use on touch devices.
• Consider CSS :hover — Simple hover styles often need no JavaScript.

💡 Best Practices