MouseEvent pageX Property

DOM 事件 MouseEvent

Definition and Usage

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

The document is 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 applicable to most major browsers.

Instance

Example 1

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;

Try It Yourself

Example 2

Output the coordinates of the mouse pointer when moving 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 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: Number, representing the horizontal coordinate of the mouse pointer in pixels.
DOM Version: None.

Browser Support

Atribute Chrome IE Firefox Safari Opera
pageX 支持 12.0 支持 支持 支持

相关页面

HTML DOM 参考手册：MouseEvent pageY 属性

HTML DOM 参考手册：MouseEvent clientX 属性

HTML DOM 参考手册：MouseEvent clientY 属性

HTML DOM 参考手册：MouseEvent screenX 属性

HTML DOM 参考手册：MouseEvent screenY 属性

DOM 事件 MouseEvent