MouseEvent pageX 屬性

DOM 事件 MouseEvent

定義和用法

當鼠標事件被觸發時，pageX 屬性返回鼠標指針的水平坐標（相對文檔）。

文檔即網頁。

提示：如需獲取鼠標指針的垂直坐標（相對文檔），請使用 pageY 屬性。

注釋：該屬性只讀。

注釋：此屬性是非標準的，但適用于大多數主要瀏覽器。

實例

例子 1

在元素上單擊鼠標按鈕時輸出鼠標指針的坐標：

var x = event.pageX;     // 獲取水平坐標
var y = event.pageY;     // 獲取垂直坐標
var coor = "X coords: " + x + ", Y coords: " + y;

親自試一試

例子 2

輸出鼠標指針在元素上移動時的坐標：

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

親自試一試

例子 3

對 pageX 和 pageY 以及 screenX 和 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;

親自試一試

語法

event.pageX

技術細節

返回值： 數字，表示鼠標指針的水平坐標，以像素為單位。
DOM 版本： 無。

瀏覽器支持

屬性 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