揭秘最短时间理解JS（二十三）：鼠标事件的幕后黑手

前端

2023-12-13 08:48:06

SEO关键词：

JS干货大餐：鼠标事件的幕后世界

各位JS爱好者，准备好踏上探索鼠标事件的奇妙之旅了吗？在这一站，我们将深入挖掘鼠标事件的对象属性，揭示它们在追踪鼠标指针位置时的强大能力。

事件对象：鼠标事件的指挥官

鼠标事件的核心是事件对象。它就像一个信息仓库，包含着与事件相关的一切细节，例如：

clientX 和 clientY： 鼠标指针在窗口中的水平和垂直坐标。
pageX 和 pageY： 鼠标指针在整个页面中的水平和垂直坐标。
screenX 和 screenY： 鼠标指针在屏幕上的水平和垂直坐标。
button： 鼠标按下时按下的按钮（左、中或右）。

鼠标属性：精准定位鼠标指针

除了事件对象之外，我们还可以通过鼠标属性直接获取鼠标指针的位置。这些属性包括：

offsetX 和 offsetY： 鼠标指针相对于目标元素的水平和垂直偏移量。
x 和 y： 鼠标指针相对于屏幕的水平和垂直坐标（与事件对象的 screenX 和 screenY 相同）。

实例时间：让鼠标指针翩翩起舞

现在，让我们用代码来体验这些属性的强大功能：

const element = document.getElementById("my-element");

element.addEventListener("mousemove", (e) => {
  console.log(`clientX: ${e.clientX}, clientY: ${e.clientY}`);
  console.log(`pageX: ${e.pageX}, pageY: ${e.pageY}`);
  console.log(`screenX: ${e.screenX}, screenY: ${e.screenY}`);
  console.log(`button: ${e.button}`);
  console.log(`offsetX: ${e.offsetX}, offsetY: ${e.offsetY}`);
  console.log(`x: ${e.x}, y: ${e.y}`);
});