MouseEvent: clientY 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

MouseEvent 接口的只读属性 clientY 提供事件发生时,在应用程序的 视口 内的垂直坐标(而不是页面内的坐标)。

例如,单击视口顶部边缘时,鼠标事件的 clientY 值将始终为 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}`;
}

结果

规范

规范
UI 事件
# dom-mouseevent-clienty

浏览器兼容性

另见