The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. This includes any portion of the document not currently visible.

Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.

Originally, this property was defined as a long integer. The CSSOM View Module redefined it as a double float. See the Browser compatibility section for details.

See Page in Coordinate systems for some additional information about coordinates specified in this fashion.

Syntax

var pageX = MouseEvent.pageX;

Value

A floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.

This property was originally specified in the Touch Events specification as a long integer, but was redefined in the CSSOM View Module to be a double-precision floating-point number to allow for subpixel precision. Even though numeric types both are represented by Number in JavaScript, they may be handled differently internally in the browser's code, resulting in potential behavior differences. See Browser compatibility to learn which browsers have been updated to use the revised data type.

Example

More examples

You can also see an example that demonstrates how to access the mouse position information in every available coordinate system.

Let's take a look at a simple example that shows you the mouse's position relative to the page's origin. Since this example is presented in an <iframe>, that top-left corner is the top-left corner of the frame, not the browser window.

JavaScript

var box = document.querySelector(".box");
var pageX = document.getElementById("x");
var pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);

The JavaScript code uses addEventListener() to register the function updateDisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.

updateDisplay() simply replaces the contents of the <span> elements meant to contain the X and Y coordinates with the values of pageX and pageY.

HTML

<div class="box">
  <p>
    Move the mouse around in this box to watch its coordinates change.
  </p>
  <p>
    <code>pageX</code>: <span id="x">n/a</span>
  </p>
  <p>
    <code>pageY</code>: <span id="y">n/a</span>
  </p>
</div>

The HTML is simple; the box we'll be watching for mouse events on is given the class "box". It has two <span> elements, one with the ID "x" and one with the ID "y". Those will be updated each time an event occurs to contain the latest mouse coordinates relative to the page.

CSS

The CSS used for this example is shown below.

.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font: 16px "Zilla", "Open Sans", "Helvetica", "Arial", sans-serif;
}

Result

Try this out here:

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'pageX' in that specification.
Working Draft Redefined from long to double.
Touch Events
The definition of 'pageX' in that specification.
Unknown Initial definition.

Prior to being added to the CSSOM View specification, pageX and pageY were available on the UIEvent interface in a limited subset of browsers for a short time.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 45Edge Full support YesFirefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Value type changed from long to doubleChrome Full support 56Edge ? Firefox No support NoIE ? Opera ? Safari ? WebView Android Full support 56Chrome Android Full support 56Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

Document Tags and Contributors

Contributors to this page: fscholz, Sheppy, jpmedley, libbymc, salty-horse, teoli, cvrebert
Last updated by: fscholz,