此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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 2015年7月.

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

浏览器兼容性

参见