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 上查看此页面 • 报告此内容的问题