jQuery mousemove Event

What You’ll Learn

The mousemove event fires whenever the pointer moves inside an element. This tutorial covers binding with .on("mousemove"), reading coordinates with event.pageX and event.pageY, triggering with .trigger("mousemove"), performance tips for high-frequency handlers, and the drag pattern that binds on mousedown and unbinds on mouseup.

Introduction

Most mouse events fire once per user action — a click, a press, an enter. mousemove is different: it fires continuously while the pointer moves inside an element, sometimes hundreds of times per second. That makes it essential for drag-and-drop, drawing tools, custom sliders, live coordinate displays, and any UI that must follow the cursor.

The official jQuery API distinguishes the mousemove event (bound with .on("mousemove") since 1.7) from the deprecated .mousemove() method used in older code. To programmatically fire a handler, use .trigger("mousemove") — available since jQuery 1.0. Any HTML element can receive the mousemove event.

Understanding the mousemove Event

The mousemove event is sent to an element when the mouse pointer moves inside that element. jQuery normalizes coordinate properties — especially event.pageX and event.pageY — so you can read pointer position consistently across browsers.

Because the event fires on every pixel of movement, handlers must stay lightweight. The official jQuery documentation recommends binding mousemove only when needed — often from a mousedown handler — and unbinding it from a mouseup handler attached high in the DOM tree (such as document), since release may occur outside the original element.

📝 Syntax

The modern jQuery API for the mousemove event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("mousemove" [, eventData ], handler) (since 1.7)

.on( "mousemove" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called on each move: function( event ) { ... }.

2. Event delegation — .on("mousemove", selector, handler)

$( "#canvas" ).on( "mousemove", ".handle", function( event ) {
  // runs when pointer moves over any .handle inside #canvas
} );

3. Trigger the event — .trigger("mousemove") (since 1.0)

.trigger( "mousemove" )

• Runs bound mousemove handlers on the matched element(s).
• Programmatic triggers may leave event.pageX and event.pageY undefined unless you supply coordinates.
• Use .triggerHandler("mousemove") to run handlers without bubbling or default actions.

4. Unbind — .off("mousemove" [, selector] [, handler])

$( "#target" ).off( "mousemove" );              // remove all mousemove handlers
$( "#canvas" ).off( "mousemove", ".handle", fn ); // remove delegated handler

Official jQuery API examples

$( "#target" ).on( "mousemove", function( event ) {
  var msg = "Handler for `mousemove` called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<p>" + msg + "</p>" );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "mousemove" );
} );

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover the drag bind/unbind pattern and live coordinate tracking. Use the Try-it links to run each snippet in the browser.

$( "#target" ).on( "mousemove", function( event ) {
  var msg = "Handler for `mousemove` called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<p>" + msg + "</p>" );
} );

Move pointer over #target → log lines like:

Handler for mousemove called at (399, 48)
Handler for mousemove called at (398, 46)
Handler for mousemove called at (397, 44)

Many events fire during a small hand movement

$( "#target" ).on( "mousemove", function( event ) {
  var msg = "Handler for `mousemove` called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<p>" + msg + "</p>" );
} );

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "mousemove" );
} );

Move over #target → coordinates logged normally

Click #other → trigger runs handler with:
Handler for mousemove called at (undefined, undefined)

Programmatic trigger has no real pointer position

$( "div" ).on( "mousemove", function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span" ).first().text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span" ).last().text( "( event.clientX, event.clientY ) : " + clientCoords );
} );

Move over the yellow div:

( event.pageX, event.pageY ) : ( 120, 85 )
( event.clientX, event.clientY ) : ( 120, 85 )

Values differ when the page is scrolled — pageX includes scroll offset

function onMove( event ) {
  $( "#box" ).css( { left: event.pageX - 25, top: event.pageY - 25 } );
}

$( "#box" ).on( "mousedown", function( event ) {
  if ( event.which !== 1 ) return;
  $( document ).on( "mousemove", onMove );
  $( document ).one( "mouseup", function() {
    $( document ).off( "mousemove", onMove );
  } );
} );

Press left button on #box → mousemove bound to document

Drag anywhere → box follows cursor

Release anywhere → mousemove unbound, no further tracking

mouseup on document catches release outside #box

var $zone = $( "#zone" );
var $marker = $( "#marker" );
var $readout = $( "#readout" );

$zone.on( "mousemove", function( event ) {
  var offset = $zone.offset();
  var x = event.pageX - offset.left;
  var y = event.pageY - offset.top;
  $marker.css( { left: x - 6, top: y - 6 } );
  $readout.text( "Local: " + Math.round( x ) + ", " + Math.round( y ) );
} );

$zone.on( "mouseleave", function() {
  $readout.text( "Move pointer inside the zone" );
} );

Move inside #zone → readout shows local coordinates

Red marker follows pointer relative to zone top-left

Leave zone → readout resets via mouseleave handler

Subtract offset() from pageX/pageY for element-local coords

🚀 Common Use Cases

• Drag-and-drop — bind mousemove on document during mousedown, unbind on mouseup.
• Drawing tools — track pointer on canvas during stroke: mousedown start, mousemove draw, mouseup finish.
• Custom sliders — update thumb position from event.pageX while dragging.
• Image map previews — show local X/Y over a photo or diagram on mousemove.
• Tooltip positioning — move a tooltip near the cursor using page coordinates.
• Debug overlays — display live coordinate readouts during development.

📝 Notes

• Bind with .on("mousemove", handler) since jQuery 1.7 — not the deprecated .mousemove(handler) method.
• Trigger with .trigger("mousemove") since jQuery 1.0 — coordinates may be undefined without a real pointer event.
• mousemove fires on every pixel of movement — keep handlers fast and unbind when done.
• jQuery normalizes event.pageX and event.pageY for cross-browser use.
• Bind mouseup on document when tracking drags — release may occur outside the original element.
• Any HTML element can receive mousemove — not limited to <canvas> or interactive widgets.
• Use .off("mousemove") to remove handlers — avoid deprecated .unbind("mousemove").
• For enter/leave hover effects without continuous tracking, prefer mouseenter and mouseleave over mousemove.

💡 Best Practices