jQuery event.pageX

What You’ll Learn

event.pageX is a Number property with the pointer’s horizontal position relative to the document’s left edge — scroll included. This tutorial covers the official mousemove demo, pairing with pageY, comparing with clientX, click pins, and drag tracking.

Introduction

When the user moves or clicks the mouse, you often need to know where the pointer was. jQuery forwards coordinate properties from the browser on its event object — including event.pageX for horizontal document position.

Unlike viewport coordinates (clientX), pageX counts pixels from the left edge of the full document, so it stays consistent when the page is scrolled vertically or horizontally. jQuery has exposed it since version 1.0.4.

Understanding event.pageX

This property answers one question: how far right is the pointer from the document’s left edge?

• Origin — left edge of the document (not the viewport, not the clicked element).
• Includes scroll — horizontal scroll offset is included in the value.
• Read-only — a Number in pixels; not a method.
• Pair with pageY — use both for full document coordinates.

📝 Syntax

Official jQuery API form (since 1.0.4):

event.pageX

// typical pattern:
$( document ).on( "mousemove", function ( event ) {
  console.log( "X:", event.pageX, "Y:", event.pageY );
});

Parameters

• None — pageX is a property, not a function.

Return value

• Number — horizontal mouse position in pixels relative to the left edge of the document.

Official jQuery API example

$( document ).on( "mousemove", function ( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

Examples Gallery

Example 1 follows the official jQuery mousemove demo. Examples 2–5 cover click pins, scroll comparison, drag tracking, and coordinate readouts.

$( document ).on( "mousemove", function ( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

#log updates continuously:
pageX: 142, pageY: 388
(values change as you move the mouse)

$( "#canvas" ).on( "click", function ( event ) {
  $( "#pin" ).css({
    left: event.pageX + "px",
    top: event.pageY + "px"
  });
  $( "#coords" ).text( "Pinned at pageX: " + event.pageX );
});

Click anywhere → pin moves to (pageX, pageY)
#coords shows "Pinned at pageX: …"

$( document ).on( "click", function ( event ) {
  $( "#compare" ).html(
    "pageX: " + event.pageX + " (document)
" +
    "clientX: " + event.clientX + " (viewport)"
  );
});

Scroll the page, click same visual spot:
pageX stays document-consistent; clientX is viewport-relative

var startX, startLeft;

$( "#box" ).on( "mousedown", function ( event ) {
  startX = event.pageX;
  startLeft = parseInt( $( this ).css( "left" ), 10 ) || 0;
  $( document ).on( "mousemove.drag", onDrag );
});

function onDrag( event ) {
  $( "#box" ).css( "left", startLeft + ( event.pageX - startX ) );
}

Drag box horizontally — left updates by (pageX - startX)
Works correctly even if page is scrolled

$( "#chart" ).on( "mousemove", function ( event ) {
  $( "#hud" )
    .text( "pageX: " + Math.round( event.pageX ) )
    .css({ left: event.pageX + 12, top: event.pageY + 12 })
    .show();
});

$( "#chart" ).on( "mouseleave", function () {
  $( "#hud" ).hide();
});

HUD follows cursor showing rounded pageX
Hidden when mouse leaves #chart

🚀 Common Use Cases

• Coordinate display — show pointer X/Y in debugging HUDs.
• Image annotation — place pins at click pageX / pageY.
• Drag and drop — compute movement deltas with page coordinates.
• Drawing apps — line tools using document-space points.
• Heatmaps — log click positions for analytics.
• Custom sliders — map horizontal pageX to value ranges.

📝 Notes

• Available since jQuery 1.0.4 — returns a Number (pixels).
• Read-only property on mouse events.
• Relative to the document left edge, not the clicked element.
• Always pair with pageY for 2D document coordinates.
• Use clientX for fixed viewport overlays; offsetX for local element coords.
• jQuery normalizes coordinates consistently across supported browsers.

💡 Best Practices