HTML | DOM MouseEvent pageX 属性

简介

在 HTML DOM 中，MouseEvent pageX 属性返回事件发生时，鼠标指针相对于整个文档左边缘的坐标值。

语法

event.pageX

属性值

• pageX：事件发生时，鼠标指针相对于整个文档左边缘的水平坐标值。

用法

1. 获取鼠标指针相对于整个文档左边缘的坐标值。

document.addEventListener('click', function (event) {
  var x = event.pageX;
  var y = event.pageY;
  console.log('x: ' + x + ', y: ' + y);
});

可以通过添加 click 事件监听器来获取鼠标点击事件。通过 event.pageX 和 event.pageY 属性可以获取鼠标指针相对于整个文档左边缘的坐标值。

2. 使用 pageX 属性来控制页面元素

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

var box = document.querySelector('#box');
box.addEventListener('mousemove', function (event) {
  var x = event.pageX;
  var y = event.pageY;
  box.style.left = x + 'px';
  box.style.top = y + 'px';
});

可以使用 pageX 属性来获取鼠标指针的坐标，然后根据实际需求来控制页面元素的位置。例如，可以将鼠标指针的坐标值赋值给页面元素的 top 和 left 属性来实现元素的跟随效果。

总结

MouseEvent pageX 属性是一个非常实用的 HTML DOM 属性，它可以帮助我们实现诸如元素拖动、跟随鼠标等功能。如果你想在网页中实现这些效果，就一定要学会使用 pageX 属性。