JavaScript MouseEvent pageX Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word PAGEX

Definition

MouseEvent.pageX is a read-only number: the horizontal pointer position in CSS pixels from the left edge of the entire document, including content scrolled out of view.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.pageX. Start with this line.

JavaScript
event.pageX
CallWhat it does
event.pageXPrimary signature.

Built into the browser. Read event.pageX on a MouseEvent — no import required.

Library declarations
JavaScript
event.pageX

Parameters

ParameterDescription
Mouse / pointer eventRequired. Source of pageX
window.scrollXOptional. Explains pageX ≈ clientX + scrollX

Return Value

Return ValueDescription
*The current value of event.pageX.

JavaScript Examples

Example 1 — Log pageX / pageY

MDN-style demo: print document coordinates while you move.

JavaScript
const x = document.getElementById("x");
const y = document.getElementById("y");

function updateDisplay(event) {
  x.textContent = event.pageX;
  y.textContent = event.pageY;
}

document.addEventListener("mousemove", updateDisplay);
Try It Yourself

How It Works

  1. Grab the output nodes. Two elements will show the latest X and Y.
  2. Listen for moves. Each mousemove delivers a fresh MouseEvent.
  3. Read document coords. pageX / pageY are relative to the document origin.
  4. Update the UI. Replace the text with the current values.

Example 2 — pageX vs clientX + Scroll

Confirm the usual relationship with window.scrollX.

JavaScript
document.addEventListener("click", (e) => {
  console.log({
    pageX: e.pageX,
    clientX: e.clientX,
    scrollX: window.scrollX,
    sum: e.clientX + window.scrollX
  });
});
Try It Yourself

How It Works

  1. Read three numbers. Document X, viewport X, and current horizontal scroll.
  2. Add viewport + scroll. clientX + scrollX usually matches pageX.
  3. Scroll horizontally (if the page allows) and click again — pageX grows while clientX can stay similar.
  4. Rule of thumb. Need absolute page position? Prefer pageX over reinventing the math.

Example 3 — pageX vs offsetX

Document space and element-local space answer different questions.

JavaScript
box.addEventListener("click", (e) => {
  console.log({
    pageX: e.pageX,     // whole document
    offsetX: e.offsetX, // inside #box padding edge
    clientX: e.clientX  // viewport
  });
});
Try It Yourself

How It Works

  1. Listen on a box. The click still carries all three X properties.
  2. Document X. pageX places the click on the full page.
  3. Local X. offsetX places the click inside the element.
  4. Choose by job. Markers on a scrolled page → pageX; hit-test inside a control → offsetX.
Compatibility

Browser Support

MouseEvent.pageX is Baseline Widely available (MDN: since July 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

MouseEvent.pageX

Document-relative horizontal pointer coordinate — includes horizontal scroll for absolute page positions.

Universal Widely available
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
pageX Excellent

Bottom line: Safe to use in modern browsers. Pair with pageY for document points; use clientX for viewport-only work and offsetX for element-local hits.

Frequently Asked Questions

It is a read-only number: the horizontal mouse position in CSS pixels relative to the left edge of the entire document, including any part of the page that is scrolled out of view.
No. MDN marks MouseEvent.pageX as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
pageX includes horizontal scroll. MDN’s example: if 200px of the left side is scrolled away and you click 100px from the viewport’s left edge, pageX is 300.
clientX is relative to the viewport and ignores document scroll. pageX is relative to the document and grows when you scroll right. Often: pageX ≈ clientX + window.scrollX.
offsetX is relative to the target element’s padding edge. pageX is relative to the whole document. Use offsetX for clicks inside a box; use pageX for positions on a scrolled page.
A double floating-point number of pixels. It was originally defined as a long integer; the CSSOM View Module redefined it as a double for subpixel precision.

Next: MouseEvent.pageY

Learn the document-relative Y coordinate that includes vertical scroll.

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)

11 people found this page helpful

JavaScript MouseEvent offsetY Property JavaScript MouseEvent pageY Property