MouseEvent: clientX 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

MouseEvent 介面的只讀屬性 clientX 提供了事件發生的應用程式視口內的水平座標（而不是頁面內的座標）。

例如，點選視口左邊緣時，滑鼠事件的 clientX 值始終為 0，而無論頁面是否水平滾動。

值

以畫素為單位的 double 浮點數值。

示例

此示例顯示了每次觸發 mousemove 事件時滑鼠的座標。

HTML

html

<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>

JavaScript

let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}`;
}

結果

規範

規範
UI 事件 # dom-mouseevent-clientx

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年9月15日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題