More examples

Let's take a look at a simple example that shows you the mouse's position relative to the page's origin. Since this example is presented in an <iframe> , that top-left corner is the top-left corner of the frame, not the browser window.

JavaScript

var box = document.querySelector(".box");
var pageX = document.getElementById("x");
var 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);
					

The JavaScript code uses addEventListener() to register the function updateDisplay() as the event handler for the mousemove , mouseenter ，和 mouseleave 事件。

updateDisplay() simply replaces the contents of the <span> elements meant to contain the X and Y coordinates with the values of pageX and pageY .

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>
					

The HTML is simple; the box we'll be watching for mouse events on is given the class "box" . It has two <span> elements, one with the ID "x" and one with the ID "y" . Those will be updated each time an event occurs to contain the latest mouse coordinates relative to the page.

.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font: 16px "Zilla", "Open Sans", "Helvetica", "Arial", sans-serif;
}
						

结果

Try this out here:

规范

Prior to being added to the CSSOM View specification, pageX and pageY were available on the UIEvent interface in a limited subset of browsers for a short time.

浏览器兼容性

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• MouseEvent.pageY

• 最后修改： 2019 年 3 月 23 日