MouseEvent pageX Property

DOM Events MouseEvent

Definition and Usage

The pageX property returns the horizontal coordinate of the mouse pointer (relative to the document) when a mouse event is triggered.

The document refers to the web page.

Tip:To get the vertical coordinate of the mouse pointer (relative to the document), use pageY Property.

Note:This property is read-only.

Note:This property is non-standard but is supported by most major browsers.

Example

Example 1

Output the coordinates of the mouse pointer when the mouse button is clicked on the element:

var x = event.pageX;     // Get the horizontal coordinate
var y = event.pageY;     // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

Try It Yourself

Example 2

Output the coordinates of the mouse pointer when moving over the element:

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Try It Yourself

Example 3

Demonstration of the differences between pageX and pageY, as well as screenX and screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

Try It Yourself

Syntax

event.pageX

Technical Details

Return Value: A number representing the horizontal coordinate of the mouse pointer, in pixels.
DOM Version: None.

Browser Support

Property Chrome IE Firefox Safari Opera
pageX Support 12.0 Support Support Support

Related Pages

HTML DOM Reference Manual:pageY Property of MouseEvent

HTML DOM Reference Manual:clientX Property of MouseEvent

HTML DOM Reference Manual:clientY Property of MouseEvent

HTML DOM Reference Manual:screenX Property of MouseEvent

HTML DOM Reference Manual:screenY Property of MouseEvent

DOM Events MouseEvent