鼠标事件：screenX 属性

基线 广泛可用

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

screenX 是 MouseEvent 接口的只读属性，它提供鼠标指针在 屏幕坐标 中的水平坐标（偏移量）。

注意：在多屏幕环境中，水平排列的屏幕将被视为单个设备，因此 screenX 值的范围将增加到屏幕的组合宽度。

值

以像素为单位的 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}`;
}

结果

事件路由

当您在窗口、文档或其他宽敞的元素上捕获事件时，您可以获取该事件（例如，单击）的坐标并正确地对其进行路由，如下例所示

js
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}

规范

规范
UI 事件
# dom-mouseevent-screenx

浏览器兼容性

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

另请参阅