Latest web development tutorials
 

MouseEvent pageX Property

< Event Object

Example

Output the coordinates of the mouse pointer when the mouse button is clicked on an 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;

The result of coor could be:

X coords: 162, Y coords: 40
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

The document is the web page.

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

Note: This property is read-only.

Note: This property is non-standard, but works in most major browsers.


Browser Support

Property
pageX Yes 12.0 Yes Yes Yes

Syntax

event.pageX

Technical Details

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

Examples

More Examples

Example

Output the coordinates of the mouse pointer while the mouse pointer moves over an 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

A demonstration of the differences between clientX and clientY and screenX and screenY:

var pX = event.pageX;
var cX = event.clientX;
var pY = event.pageY;
var cY = event.clientY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "client - X: " + cX + ", Y coords: " + cY;
Try it Yourself »

Related Pages

HTML DOM reference: MouseEvent pageY Property

HTML DOM reference: MouseEvent clientX Property

HTML DOM reference: MouseEvent clientY Property

HTML DOM reference: MouseEvent screenX Property

HTML DOM reference: MouseEvent screenY Property


< Event Object