深入理解MouseEvent中的坐标属性

130 阅读2分钟

在 Web 开发中,处理鼠标事件是一个常见的需求。JavaScript 提供了一系列属性来获取鼠标指针的位置,这些属性包括 pageXpageYclientXclientYscreenXscreenYoffsetX 和 offsetY。理解这些属性的区别和使用场景对于开发者来说非常重要。本文将详细介绍这些属性及其用途。

一、 pageX 和 pageY

  • 定义pageX 和 pageY 属性返回鼠标指针相对于整个文档(页面)的水平和垂直坐标。
  • 特点:包括页面滚动的距离,因此无论页面是否滚动,pageX 和 pageY 都能提供鼠标指针在整个页面中的准确位置。
  • 使用场景:适用于需要获取鼠标在整个文档中的位置的场景,例如绘图应用、拖拽操作等。
document.addEventListener('click', function(event) {
    console.log(`pageX: ${event.pageX}, pageY: ${event.pageY}`);
});

二、 clientX 和 clientY

  • 定义clientX 和 clientY 属性返回鼠标指针相对于视口(viewport)的水平和垂直坐标。
  • 特点:不包括页面滚动的距离,仅提供鼠标指针在当前视口中的位置。
  • 使用场景:适用于需要获取鼠标在当前视口中的位置的场景,例如定位弹出框、工具提示等。
document.addEventListener('click', function(event) {
    console.log(`clientX: ${event.clientX}, clientY: ${event.clientY}`);
});

三、 screenX 和 screenY

  • 定义screenX 和 screenY 属性返回鼠标指针相对于屏幕的水平和垂直坐标。
  • 特点:提供鼠标指针在整个屏幕中的位置,与浏览器窗口的位置无关。
  • 使用场景:适用于需要获取鼠标在整个屏幕中的位置的场景,例如多屏幕环境下的鼠标位置监控。
document.addEventListener('click', function(event) {
    console.log(`screenX: ${event.screenX}, screenY: ${event.screenY}`);
});

四、 offsetX 和 offsetY

  • 定义offsetX 和 offsetY 属性返回鼠标指针相对于事件目标元素的水平和垂直坐标。
  • 特点:提供鼠标指针在事件目标元素中的位置,通常用于处理元素内部的鼠标事件。
  • 使用场景:适用于需要获取鼠标在特定元素中的位置的场景,例如绘图应用中的画布、拖拽操作中的目标元素等。
document.getElementById('myButton').addEventListener('click', function(event) {
    console.log(`offsetX: ${event.offsetX}, offsetY: ${event.offsetY}`);
});

五、一张图

最后我们用一张图来直观的说明这些个属性的含义:

image.png

  • pageX和 pageY:获取鼠标指针相对于整个文档的位置,包含页面滚动。
  • clientX 和 clientY:获取鼠标指针相对于可视区域的位置,不包含页面滚动。
  • screenX 和 screenY:获取鼠标指针相对于屏幕的位置。
  • offsetX 和 offsetY:获取鼠标指针相对于事件目标元素的位置。