浏览器鼠标事件位置信息扫盲

鼠标事件是前端开发中常见且重要的交互方式之一。处理鼠标事件时了解鼠标的位置信息是至关重要的，鼠标位置信息能够帮助我们实现诸如拖拽、绘图和精确定位等交互功能。本文将介绍鼠标事件中的各种位置信息。

鼠标事件

鼠标事件是用户在浏览器中通过鼠标与页面元素交互时触发的事件。常见的鼠标事件包括：

1. click：用户单击鼠标按钮时触发。
2. dblclick：用户双击鼠标按钮时触发。
3. mousedown：用户按下鼠标按钮时触发。
4. mouseup：用户释放鼠标按钮时触发。
5. mousemove：用户移动鼠标时触发。
6. mouseenter：鼠标指针进入元素时触发。
7. mouseleave：鼠标指针离开元素时触发。
8. mouseover：鼠标指针进入元素时触发。
9. mouseout：鼠标指针离开元素时触发。
10. contextmenu：用户右击鼠标按钮（打开菜单）时触发。

鼠标事件对象中的位置信息属性

鼠标事件对象

当用户在浏览器中与页面进行交互时，例如点击、移动鼠标或按下鼠标按钮，浏览器会创建一个鼠标事件对象。这个对象包含了关于事件的大量信息，包括事件的类型、触发事件的元素、鼠标的位置等。

dom.addEventListener('click', ((e: MouseEvent) => {
    // e: 鼠标事件对象
})

位置信息属性

以下是最常用的位置信息属性：

• clientX 和 clientY

  • clientX：相对于浏览器窗口（视口）的水平坐标。
  • clientY：相对于浏览器窗口（视口）的垂直坐标。
  • clientX 和 clientY 是相对于浏览器视口的坐标，即使页面滚动了，它们也不会改变。

• pageX 和 pageY

  • pageX：相对于文档的水平坐标。
  • pageY：相对于文档的垂直坐标。
  • pageX 和 pageY 是相对于整个文档页面的坐标，会受页面滚动的影响而改变。

• screenX 和 screenY

  • screenX：相对于用户屏幕的水平坐标。
  • screenY：相对于用户屏幕的垂直坐标。

• offsetX 和 offsetY

  • offsetX：相对于事件目标元素的左边缘距离。
  • offsetY：相对于事件目标元素的上边缘距离。

• movementX 和 movementY

  • movementX：当前鼠标事件与前一个鼠标事件之间的水平位移。
  • movementY：当前鼠标事件与前一个鼠标事件之间的垂直位移。

代码示例

下面是一个示例，展示 Vue 3 中鼠标事件对象的位置信息属性。

<template>
  <div style="width: 2000px; height: 1000px">
    <div
      id="target"
      @mousemove="handleMouseMove"
      style="width: 300px; height: 200px; background-color: lightblue; margin: 200px; position: relative;"
    >
      移动鼠标到此区域
    <p id="output">{{ mouseInfo }}</p>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'MousePosition',
  setup() {
    const mouseInfo = reactive({
      clientX: 0,
      clientY: 0,
      pageX: 0,
      pageY: 0,
      screenX: 0,
      screenY: 0,
      offsetX: 0,
      offsetY: 0,
      movementX: 0,
      movementY: 0
    });

    const handleMouseMove = (event: MouseEvent) => {
      mouseInfo.clientX = event.clientX;
      mouseInfo.clientY = event.clientY;
      mouseInfo.pageX = event.pageX;
      mouseInfo.pageY = event.pageY;
      mouseInfo.screenX = event.screenX;
      mouseInfo.screenY = event.screenY;
      mouseInfo.offsetX = event.offsetX;
      mouseInfo.offsetY = event.offsetY;
      mouseInfo.movementX = event.movementX;
      mouseInfo.movementY = event.movementY;
    };

    return {
      mouseInfo,
      handleMouseMove
    };
  }
});
</script>