此页面由社区从英文翻译而来。了解更多并加入 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

浏览器兼容性

参见