MouseEvent clientY 屬性

DOM 事件 MouseEvent

定義和用法

當鼠標事件被觸發時，clientY 屬性返回鼠標指針的垂直坐標（根據客戶端區域）。

客戶端區域是當前窗口。

提示：如需獲取鼠標指針的水平坐標（根據客戶端區域），請使用 clientX 屬性。

注釋：該屬性只讀。

實例

例子 1

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

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

結果是：

X coords: 142, Y coords: 99

親自試一試

例子 2

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

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

親自試一試

例子 3

演示 clientX 與 clientY 以及 screenX 與 screenY 之間的區別：

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

親自試一試

語法

event.clientY

技術細節

返回值： 數字值，表示鼠標指針的垂直坐標，以像素計。
DOM 版本： DOM Level 2 Events

瀏覽器支持

屬性 Chrome IE Firefox Safari Opera
clientY 支持 支持 支持 支持 支持

相關頁面

HTML DOM 參考手冊：MouseEvent clientX 屬性

HTML DOM 參考手冊：MouseEvent screenX 屬性

HTML DOM 參考手冊：MouseEvent screenY 屬性

HTML DOM 參考手冊：MouseEvent offsetX 屬性

HTML DOM 參考手冊：MouseEvent offsetY 屬性

DOM 事件 MouseEvent