MouseEvent pageY Property

DOM Events MouseEvent

Definition and Usage

When a mouse event is triggered, the pageY property returns the vertical coordinate of the mouse pointer (relative to the document).

The document refers to the web page.

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

Note:This property is read-only.

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

Example

Example 1

Output the mouse pointer coordinates 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 mouse pointer coordinates when the mouse pointer moves 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

Demonstrate the difference 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

Syntax

event.pageY

Technical Details

Return value: A numeric value representing the vertical coordinate of the mouse pointer, in pixels.
DOM Version: None.

Browser Support

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

Related Pages

HTML DOM Reference Manual:MouseEvent pageX Property

HTML DOM Reference Manual:MouseEvent clientX Property

HTML DOM Reference Manual:MouseEvent clientY Property

HTML DOM Reference Manual:MouseEvent screenX Property

HTML DOM Reference Manual:MouseEvent screenY Property

DOM Events MouseEvent