MouseEvent clientX 屬性

Peristiwa DOM MouseEvent

定義和用法

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

客戶端區域是當前窗口。

提示：如需獲取鼠標指針的垂直坐標（根據客戶端區域），請使用 Sifat clientY。

註釋：該屬性僅讀。

實例

例子 1

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

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

親自試試

例子 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.clientX

技術細節

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

瀏覽器支援

属性行 Chrome IE Firefox Safari Opera
clientX Dukungan Dukungan Dukungan Dukungan Dukungan

Laman yang berkaitan

Panduan Rujukan DOM HTML:Sifat clientY MouseEvent

Panduan Rujukan DOM HTML:Sifat screenX MouseEvent

Panduan Rujukan DOM HTML:Sifat screenY MouseEvent

Panduan Rujukan DOM HTML:Sifat offsetX MouseEvent

Panduan Rujukan DOM HTML:Sifat offsetY MouseEvent

Peristiwa DOM MouseEvent