`MouseEvent` 与鼠标位置相关的属性

在 Web 开发中，MouseEvent 接口提供了多种与鼠标位置相关的属性，用于精确定位鼠标事件发生时鼠标指针的位置。这些属性包括：

• clientX / clientY
• movementX / movementY
• offsetX / offsetY
• pageX / pageY
• screenX / screenY
• layerX / layerY（已废弃，非标准）

下面我会逐一详细讲解它们的含义、区别和使用场景，并配有图示说明（文字描述）。

---

✅ 1. clientX / clientY

📌 定义：

鼠标指针相对于**浏览器视口（viewport）**的水平/垂直坐标。

📌 特点：

• 不包括滚动条滚动的距离。
• 单位是像素（px）。
• 不受页面滚动影响。

📌 示例：

document.addEventListener('click', (e) => {
  console.log(`clientX: ${e.clientX}, clientY: ${e.clientY}`);
});

📌 使用场景：

• 用于定位鼠标在视口中的位置，比如拖拽元素、悬浮提示框等。

---

✅ 2. movementX / movementY

📌 定义：

鼠标指针相对于上一次鼠标事件的移动距离。

📌 特点：

• 只在 mousemove 事件中有效。
• 单位是像素（px）。
• 可用于检测鼠标移动速度和方向。

📌 示例：

document.addEventListener('mousemove', (e) => {
  console.log(`movementX: ${e.movementX}, movementY: ${e.movementY}`);
});

📌 使用场景：

• 实现鼠标手势、拖拽、画笔绘图等。

---

✅ 3. offsetX / offsetY

📌 定义：

鼠标指针相对于**事件目标元素（target element）**的内边距（padding）边缘的坐标。

📌 特点：

• 相对于触发事件的元素本身。
• 不包括元素的边框（border）和外边距（margin）。
• 单位是像素（px）。

📌 示例：

<div id="box" style="width: 200px; height: 200px; background: lightblue;"></div>
<script>
  document.getElementById('box').addEventListener('click', (e) => {
    console.log(`offsetX: ${e.offsetX}, offsetY: ${e.offsetY}`);
  });
</script>

📌 使用场景：

• 在画布（canvas）上绘图时，获取鼠标在画布内的坐标。

---

✅ 4. pageX / pageY

📌 定义：

鼠标指针相对于整个文档页面的水平/垂直坐标。

📌 特点：

• 包括滚动条滚动的距离。
• 单位是像素（px）。
• 不受视口限制。

📌 示例：

document.addEventListener('click', (e) => {
  console.log(`pageX: ${e.pageX}, pageY: ${e.pageY}`);
});

📌 使用场景：

• 需要知道鼠标在整个页面中的位置，比如全页面拖拽、滚动监听等。

---

✅ 5. screenX / screenY

📌 定义：

鼠标指针相对于用户屏幕的水平/垂直坐标。

📌 特点：

• 相对于整个屏幕，而不是浏览器窗口。
• 单位是像素（px）。
• 多显示器环境下，坐标可能超出单个屏幕范围。

📌 示例：

document.addEventListener('click', (e) => {
  console.log(`screenX: ${e.screenX}, screenY: ${e.screenY}`);
});

📌 使用场景：

• 极少使用，主要用于调试或多窗口应用。

---

⚠️ 6. layerX / layerY（已废弃，非标准）

📌 定义：

曾经是鼠标相对于定位的祖先元素的坐标。

📌 现状：

• 非标准属性，已被废弃。
• 各浏览器实现不一致，不建议使用。
• 在 Firefox 中曾有效，但现代浏览器中已移除或行为不一致。

📌 建议：

• 不要使用 layerX / layerY。
• 用 offsetX / offsetY 或 getBoundingClientRect() 替代。

---

📊 总结对比表：

属性名	相对对象	是否包含滚动	是否标准	常用场景
clientX/Y	视口（viewport）	❌	✅	悬浮框、视口内交互
movementX/Y	上一次鼠标位置	❌	✅	拖拽、绘图、手势识别
offsetX/Y	事件目标元素	❌	✅	Canvas 绘图、元素内点击
pageX/Y	整个文档	✅	✅	页面级交互、滚动相关
screenX/Y	屏幕	✅	✅	多窗口调试、极少使用
layerX/Y	定位祖先元素	❌	❌（废弃）	❌ 不要使用

---

🎯 实战建议：

• Canvas 绘图：用 offsetX / offsetY。
• 拖拽元素：用 clientX / clientY 或 pageX / pageY。
• 检测鼠标移动速度：用 movementX / movementY。
• 避免使用：layerX / layerY。

---