原题链接 (opens new window)

题目

声明一个函数，在鼠标移动过程中，获取鼠标坐标。

<script setup lang="ts">
// Implement ...
function useEventListener(target, event, callback) {}

// Implement ...
function useMouse() {
  useEventListener(window, "mousemove", () => {});
}
const { x, y } = useMouse();
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

题目分析

本题考查组合函数以及鼠标事件的使用。我们可以通过 window 监听 mousemove 事件，通过回调函数的参数获取到鼠标的坐标

实现

<script setup>
import { onMounted, onBeforeUnmount, reactive, toRefs } from "vue";
// Implement ...
function useEventListener(target, event, callback) {
  onMounted(() => target.addEventListener(event, callback));
  onBeforeUnmount(() => target.removeEventListener(event, callback));
}

// Implement ...
function useMouse() {
  let posi = reactive({
    x: 0,
    y: 0,
  });
  useEventListener(window, "mousemove", (e) => {
    let { clientX, clientY } = e;
    posi.x = clientX;
    posi.y = clientY;
  });
  return toRefs(posi);
}
const { x, y } = useMouse();
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

解析

在 JavaScript 中，可以使用不同的方法来获取鼠标在页面中的位置。下面列举了几种常用的方法：

• 可以通过访问事件对象的 clientX 和 clientY 属性来获取鼠标相对于浏览器窗口可视区域左上角的水平和垂直位置。

• 可以通过访问事件对象的 pageX 和 pageY 属性来获取鼠标相对于整个文档页面左上角的水平和垂直位置。

• 可以通过访问事件对象的 offsetX 和 offsetY 属性来获取鼠标相对于触发事件的元素的内部坐标位置。

下图列举各个属性的含义及浏览器兼容性