MouseEvent: pageX property

A double 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.

Let's take a look at an 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.

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;
}

JavaScript

const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const 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() replaces the contents of the <span> elements meant to contain the X and Y coordinates with the values of pageX and pageY.

Result

Try this out here:

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

• MouseEvent.pageY
• Coordinate systems