screenX 只读特性在 MouseEvent interface provides the horizontal coordinate (offset) of the mouse pointer in global (screen) coordinates.

句法

var x = instanceOfMouseEvent.screenX
					

返回值

A double floating point value. Early versions of the spec defined this as an integer referring to the number of pixels. See the "Browser compatibility" section for details.

范例

This example displays your mouse's coordinates whenever you trigger the mousemove 事件。

HTML

<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>
					

JavaScript

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}`;
}
					

结果

Routing an event

When you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates:

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

规范

规范 状态 注释
CSSOM (CSS 对象模型) 视图模块
The definition of 'screenX' in that specification.
工作草案 重新定义 MouseEvent from long to double.
DOM (文档对象模型) 3 级事件规范
The definition of 'MouseEvent.screenX' in that specification.
过时 无变化自 DOM (文档对象模型) 2 级事件规范 .
DOM (文档对象模型) 2 级事件规范
The definition of 'MouseEvent.sceenX' in that specification.
过时 初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
screenX Chrome Yes Edge 12 Firefox Yes IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
Value type changed from long to double Chrome 56 Edge ≤79 Firefox ? IE ? Opera ? Safari ? WebView Android 56 Chrome Android 56 Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 6.0

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

另请参阅

元数据

  • 最后修改: