jQuery event.pageX Property

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery event.pageX property — mouse horizontal position relative to the document left edge
Definition

What Is event.pageX?

event.pageX is a Number on the jQuery event object. It is the mouse pointer’s horizontal position in pixels relative to the left edge of the document (scroll included). Added in jQuery 1.0.4. Pair it with event.pageY for a full document (x, y) point.

Remember
event.pageX   // Number — px from document left (read-only)

$(document).on("mousemove", function (event) {
  // pageX: horizontal · pageY: vertical
  console.log(event.pageX, event.pageY);
});

pageX  → document coordinates (includes scroll)
clientX → viewport coordinates (visible window)
offsetX → relative to the event target element
NeedUse
Document Xevent.pageX
Document Yevent.pageY
Track the pointer.on("mousemove", …)
Click position.on("click", …) + pageX
Viewport Xevent.clientX (native / originalEvent)
Approach

How to Use event.pageX

Bind a mouse event, then read pageX (and usually pageY) inside the handler.

  1. Choose a mouse event (mousemove, click, mousedown, …).
  2. Bind with .on("mousemove", handler) (or click / mousedown).
  3. Inside the handler, read event.pageX — pixels from the document’s left edge.
  4. For a full point, also read event.pageY.
  5. Use document coords for pins, drag, and scroll-aware UI — not viewport-only math.
PieceRequired?Role
Mouse eventYesProvides pointer coordinates
event.pageX—Horizontal px from document left
event.pageYOptionalVertical px from document top
HandlerYesReads and uses the values

Pseudocode

Pseudocode
element.on("mousemove" | "click" | …, handler)

when mouse event fires:
    event.pageX = distance from document left (px)
    event.pageY = distance from document top  (px)
    // includes scroll — not just the visible viewport
    call handler(event)

// Rough relation:
// pageX ≈ clientX + window.scrollX
Reference

Cheat Sheet

Keep these facts handy while reading pointer coordinates.

TopicDetail
TypeNumber property (not a method)
SincejQuery 1.0.4
OriginDocument left edge
UnitCSS pixels
Official demomousemove → log pageX + pageY
vs clientXDocument (+ scroll) vs viewport
vs offsetXDocument vs target element
Mutates?No — read-only
Try it

Live Preview

Move the pointer over the pad to see pageX and pageY — same idea as the official jQuery API demo.

Bound with .on("mousemove") — move over the pad to update coordinates.

Result
Move your mouse over the pad…
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Official Demo: Log pageX / pageY

On mousemove, show both document coordinates (official idea).

jQuery
$(document).on("mousemove", function (event) {
  $("#out").text(
    "pageX: " + event.pageX + ", pageY: " + event.pageY
  );
});
Try It Yourself

How It Works

  1. Bind. mousemove on document catches moves anywhere on the page.
  2. Read X. event.pageX is distance from the document’s left edge.
  3. Read Y. event.pageY is distance from the document’s top edge.
  4. Update. Each move rewrites the log — same as the official demo.

Example 2 — Click Coordinates

Capture where the user clicked using pageX and pageY.

jQuery
$(document).on("click", function (event) {
  $("#out").text(
    "Clicked at pageX: " + event.pageX +
    ", pageY: " + event.pageY
  );
});
Try It Yourself

How It Works

  1. Bind click. One handler for any click on the page.
  2. Read. pageX / pageY are the click point in document space.
  3. Show. Write the pair into #out.
  4. Use case. Same numbers you would use to place a pin or marker.

Example 3 — pageX vs clientX

Document coordinates include scroll; viewport coordinates do not.

jQuery
$(document).on("click", function (event) {
  $("#out").text(
    "pageX: " + event.pageX + " (document)\n" +
    "clientX: " + event.clientX + " (viewport)\n" +
    "scrollX: " + window.scrollX
  );
});
Try It Yourself

How It Works

  1. pageX. Measured from the document’s left edge.
  2. clientX. Measured from the viewport’s left edge.
  3. Scroll. When scrollX > 0, pageX is larger than clientX.
  4. Rule. Need layout on the full page? Prefer pageX.

Example 4 — Track pageX Delta

Measure how far the pointer moved horizontally since mousedown (drag idea).

jQuery
var startX = 0;

$("#box").on("mousedown", function (event) {
  startX = event.pageX;
  $("#out").text("Start pageX: " + startX);
  $(document)
    .on("mousemove.drag", function (event) {
      var dx = event.pageX - startX;
      $("#out").text("Delta X: " + dx + " px");
    })
    .on("mouseup.drag", function () {
      $(document).off(".drag");
      $("#out").append("\nReleased.");
    });
});
Try It Yourself

How It Works

  1. Store. On mousedown, save the starting pageX.
  2. Move. On mousemove, subtract start from current pageX.
  3. Delta. Positive = moved right; negative = moved left.
  4. Cleanup. On mouseup, remove the temporary .drag handlers.

Example 5 — Pair pageX with pageY

Hover a region and report both document coordinates together.

jQuery
$("#area").on("mousemove", function (event) {
  $("#out").text(
    "Inside area — pageX: " + event.pageX +
    ", pageY: " + event.pageY
  );
}).on("mouseleave", function () {
  $("#out").text("Left the area.");
});
Try It Yourself

How It Works

  1. Scope. Bind on #area so only moves inside that element count.
  2. Both axes. Log pageX and pageY as one document point.
  3. Leave. mouseleave clears or resets the readout.
  4. Pattern. Useful for charts, maps, and hover HUDs.

Edge Cases & Pitfalls

Watch for these when using pageX in real UI.

scroll

Do not mix pageX with viewport math

Positioning an element with position: fixed needs viewport coords (clientX). Document layout / absolute pins need pageX.

events

Only mouse (pointer) events

Keyboard events do not give a meaningful pageX. Bind mousemove, click, mousedown, and related mouse events.

freq

mousemove fires very often

Keep handlers light. Heavy DOM work on every move can stutter — throttle or only update what changed.

readonly

You cannot assign event.pageX

It is read-only. Copy the value into your own variable or CSS if you need to reuse it.

Compatibility

Browser Support

event.pageX is a jQuery event-object property (since 1.0.4). The underlying mouse coordinates are standard in all modern browsers. Works wherever your loaded jQuery version runs.

✓ Stable · jQuery 1.0.4+

event.pageX

Supported wherever jQuery 1.0.4+ is loaded. Prefer jQuery 3.x with .on("mousemove") / .on("click") for modern code.

100% jQuery 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
event.pageX 1.0.4+

Bottom line: Safe for production. Use pageX for document coordinates; pair with pageY; use clientX only when you need viewport space.

Analysis

Performance Notes

ApproachCostBest for
.on("click", …) + pageXCheapOne-shot click positions
.on("mousemove", …)High frequencyLive tracking — keep work tiny
Delegated document mousemoveFineGlobal cursor HUD / tools
Heavy layout in mousemoveCan stutterThrottle or update only changed fields

Reading pageX itself is free. The cost is how often you run the handler — especially on mousemove.

Remember

Key Takeaways

  • Role: horizontal mouse position from the document’s left edge.
  • Pair: use pageY for the vertical axis.
  • vs clientX: pageX includes scroll; clientX is viewport-only.
  • Keep light: mousemove handlers should stay short.

One line: event.pageX is “how far from the document’s left edge is the pointer?”

Frequently Asked Questions

event.pageX is a Number on the jQuery event object. It is the mouse pointer’s horizontal position in pixels relative to the left edge of the document — including any horizontal scroll. Available since jQuery 1.0.4 on mouse events such as mousemove, click, and mousedown.
clientX is relative to the browser viewport (visible window). pageX includes document scroll — roughly pageX ≈ clientX + window.scrollX. Use pageX for document-wide coordinates; clientX for viewport-fixed UI.
pageX is horizontal (from the document’s left edge). pageY is vertical (from the document’s top edge). Together they form a (x, y) point in document space — the official jQuery demo logs both on mousemove.
Mouse events expose pageX — mousemove, mouseenter, mouseleave, mouseover, mouseout, mousedown, mouseup, and click. Keyboard events do not carry a meaningful pointer pageX.
No. pageX is read-only — the browser sets it from the pointer when the event fires. Read pageX and apply it to your own variables or element positions.
pageX is relative to the entire document. offsetX is relative to the event target’s padding edge. Use pageX for absolute document positioning; offsetX for clicks inside a specific box.

Next: event.pageY

Read the vertical document coordinate and complete the (x, y) pair.

event.pageY 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)

9 people found this page helpful

jQuery event.type Property jQuery event.pageY Property