鼠标事件：clientX 属性

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常工作。它自以下时间起在各浏览器中均可用 2015 年 7 月.

clientX 是 MouseEvent 接口的一个只读属性，它提供事件发生时在应用程序 视口 中的水平坐标（与页面内的坐标相对）。

例如，单击视口左侧边缘将始终导致鼠标事件的 clientX 值为 0，无论页面是否水平滚动。

值

以像素为单位的 double 浮点数。

示例

此示例在您触发 mousemove 事件时显示鼠标的坐标。

HTML

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

JavaScript

js
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}`;
}

结果

规范

规范
用户界面事件
# dom-mouseevent-clientx

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅