MouseEvent: pageX 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

由于它是基于文档边缘的，因此该属性会考虑页面上的任何水平滚动。例如，如果页面滚动导致文档左侧的 200 像素内容不可见，而鼠标在视图左边缘向内 100 像素处单击，则 pageX 返回的值将是 300。

最初，此属性被定义为 long（长整型）整数。而 CSSOM View 模块将其重新定义为 double（双精度浮点型）浮点数。详情请参见浏览器兼容性部分。

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

值

鼠标点击时距离*文档*左边缘的像素值，以 double 浮点数表示，忽略任何可能生效的滚动或视口定位。

此属性最初在 Touch Events 规范中被指定为长整型，但在 CSSOM View 模块中被重新定义为双精度浮点数，以允许亚像素精度。尽管在 JavaScript 中，两种数值类型都表示为 Number，但在浏览器内部处理方式可能不同，从而可能导致行为差异。

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

示例

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

让我们看一个示例，该示例显示鼠标相对于页面原点的位置。由于此示例在 <iframe> 中呈现，因此左上角是框架的左上角，而不是浏览器窗口的左上角。

HTML

html

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

CSS

此示例使用的 CSS 如下所示。

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

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);
box.addEventListener("mouseenter", updateDisplay);
box.addEventListener("mouseleave", updateDisplay);

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

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