鼠标事件：pageX 属性

基线 广泛可用

此功能已建立，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

pageX 是 MouseEvent 接口的只读属性，返回鼠标单击时相对于整个文档左侧边缘的 X（水平）坐标（以像素为单位）。这包括当前不可见文档的任何部分。

由于基于文档边缘，因此此属性会考虑页面的任何水平滚动。例如，如果页面滚动使得文档左侧的 200 像素滚动到不可见区域，并且鼠标从视图左侧边缘向内单击 100 像素，则pageX 返回的值将为 300。

最初，此属性定义为long 整数。 CSSOM 视图模块 将其重新定义为double 浮点数。有关详细信息，请参见 浏览器兼容性 部分。

值

请参见 坐标系，以获取有关以这种方式指定的坐标的更多信息。

鼠标单击时相对于文档左侧边缘的像素数的double 浮点数，无论可能存在的任何滚动或视窗定位。

此属性最初在触控事件规范中被指定为长整数，但在 CSSOM 视图模块中被重新定义为双精度浮点数，以允许亚像素精度。尽管数值类型在 JavaScript 中都由Number 表示，但它们在浏览器的内部代码中可能以不同的方式处理，从而导致潜在的行为差异。

示例

请参见 浏览器兼容性，以了解哪些浏览器已更新为使用修订后的数据类型。

显示相对于页面原点的鼠标位置

HTML

让我们来看一个简单的示例，它向您显示鼠标相对于页面原点的 位置。由于此示例是在 <iframe> 中呈现的，因此该左上角是框架的左上角，而不是浏览器窗口。
<div class="box">
  <p>Move the mouse around in this box to watch its coordinates change.</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>

html

CSS

HTML 很简单；我们将监听鼠标事件的框被赋予了类"box"。它有两个<span> 元素，一个 ID 为"x"，另一个 ID 为"y"。每次事件发生时，这些元素都会更新以包含最新的鼠标坐标（相对于页面）。

此示例使用的 CSS 如下所示。
.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

JavaScript

css
const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);

js

JavaScript 代码使用 addEventListener() 将函数updateDisplay() 注册为 mousemove、mouseenter 和 mouseleave 事件的事件处理程序。

updateDisplay() 用pageX 和 pageY 的值替换用于包含 X 和 Y 坐标的 <span> 元素的内容。

结果

在这里试试

更多示例

规范

您还可以查看一个示例，该示例演示了如何在每个可用的坐标系中 访问鼠标位置 信息。
规范
# CSSOM 视图模块

dom-mouseevent-pagex

浏览器兼容性

在添加到 CSSOM 视图规范之前，pageX 和 pageY 在有限的浏览器子集中可用于 UIEvent 接口，时间很短。

另请参阅