MouseEvent: screenX 属性
MouseEvent 接口的只读属性 screenX 提供鼠标指针在 屏幕坐标中的水平坐标（偏移量）。
注意： 在多屏幕环境中，水平对齐的屏幕将被视为一个设备，因此 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}`;
}
结果
事件路由
当您在 window、document 或其他宽敞的元素上捕获事件时，您可以获取该事件（例如点击）的坐标并进行适当的路由，如下例所示：
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 |
浏览器兼容性
加载中…