Javascript | MouseEvent 哪个属性

在 JavaScript 中，MouseEvent 对象表示用户与页面上的元素进行交互导致发生的事件，例如鼠标单击、双击、拖动等操作。MouseEvent 包含许多属性，用以描述事件的不同方面和细节。

以下是 MouseEvent 中一些常用属性的介绍：

clientX 和 clientY

clientX 和 clientY 记录了鼠标事件发生时相对于当前窗口的 X 和 Y 坐标。

document.addEventListener("click", function(event) {
  console.log("鼠标在窗口的坐标为 (" + event.clientX + ", " + event.clientY + ")");
});

offsetX 和 offsetY

offsetX 和 offsetY 记录了鼠标事件发生时相对于当前元素的左上角的 X 和 Y 坐标。

document.getElementById("my-element").addEventListener("click", function(event) {
  console.log("鼠标在元素内的坐标为 (" + event.offsetX + ", " + event.offsetY + ")");
});

screenX 和 screenY

screenX 和 screenY 记录了鼠标事件发生时相对于屏幕左上角的 X 和 Y 坐标。

document.addEventListener("click", function(event) {
  console.log("鼠标在屏幕上的坐标为 (" + event.screenX + ", " + event.screenY + ")");
});

target

target 记录了触发事件的元素。对于鼠标单击事件，通常可以使用 event.target 来获取被点击的元素。

document.addEventListener("click", function(event) {
  console.log("被点击的元素是：" + event.target.tagName);
});

以上仅是 MouseEvent 中的一些属性，还有许多其他有用的属性，例如 button（用于获取按下的鼠标按钮）、movementX 和 movementY（用于获取鼠标的移动距离）等。对于不同的应用场景，在 MouseEvent 中选择适合的属性可以轻松地获取所需的信息。