MouseEvent：clientX 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

MouseEvent 接口的 clientX 只读属性提供了事件发生时应用程序视口内的水平坐标（而不是页面中的坐标）。

例如，单击视口的左边缘时，无论页面是否水平滚动，都会触发一个 clientX 值为 0 的鼠标事件。

值

一个以像素为单位的 double 类型浮点值。

示例

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

HTML

html
<p>移动鼠标以查看其位置。</p>
<p id="screen-log"></p>

JavaScript

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

function logKey(e) {
  screenLog.innerText = `
    屏幕 X/Y：${e.screenX}，${e.screenY}
    视口 X/Y：${e.clientX}，${e.clientY}`;
}

结果

规范

Specification
UI Events
# dom-mouseevent-clientx

浏览器兼容性

BCD tables only load in the browser

参见