# React技巧之获取鼠标坐标位置

原文链接：https://bobbyhadz.com/blog/react-get-mouse-position (opens new window)

正文从这开始~

# 总览

在React中获得鼠标位置：

在元素上设置onMouseMove属性，或者在window对象上添加事件监听器。
提供事件处理函数。
在event对象上访问相关属性。

import {useEffect, useState} from 'react';

export default function App() {
  const [coords, setCoords] = useState({x: 0, y: 0});

  const [globalCoords, setGlobalCoords] = useState({x: 0, y: 0});

  useEffect(() => {
    // 👇️ get global mouse coordinates
    const handleWindowMouseMove = event => {
      setGlobalCoords({
        x: event.screenX,
        y: event.screenY,
      });
    };
    window.addEventListener('mousemove', handleWindowMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleWindowMouseMove);
    };
  }, []);

  const handleMouseMove = event => {
    setCoords({
      x: event.clientX - event.target.offsetLeft,
      y: event.clientY - event.target.offsetTop,
    });
  };

  return (
    <div>
      {/* 👇️ Get mouse coordinates relative to element */}
      <div
        onMouseMove={handleMouseMove}
        style={{padding: '3rem', backgroundColor: 'lightgray'}}
      >
        <h2>
          Coords: {coords.x} {coords.y}
        </h2>
      </div>

      <hr />

      <h2>
        Global coords: {globalCoords.x} {globalCoords.y}
      </h2>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 鼠标移动事件

上面代码向我们展示了，如何在div元素或者window对象上处理mousemove事件。

当鼠标指针的热点在一个元素内时，用户的鼠标被移动，mousemove事件就会在该元素上触发。

为了得到相对于页面上某个元素的鼠标坐标，我们必须从clientX减去offsetLeft，从clientY减去offsetTop。

// 👇️ get mouse coords relative to the an element
const handleMouseMove = event => {
  setCoords({
    x: event.clientX - event.target.offsetLeft,
    y: event.clientY - event.target.offsetTop,
  });
};

1
2
3
4
5
6
7

offsetLeft属性返回当前元素的左上角在offsetParent节点内向左偏移的像素数。offsetTop属性返回当前元素的外边界相对于，位置最近的祖先元素的内边界之间的像素数。

clientX属性返回事件发生时，在应用程序视口中的水平坐标。clientY属性返回事件发生时，在应用程序视口中的垂直坐标。

# 监听鼠标事件

第二个示例向我们展示了，为了得到全局鼠标坐标，如何在window对象上监听mousemove事件。

useEffect(() => {
  // 👇️ get global mouse coordinates
  const handleWindowMouseMove = event => {
    setGlobalCoords({
      x: event.screenX,
      y: event.screenY,
    });
  };
  window.addEventListener('mousemove', handleWindowMouseMove);

  return () => {
    window.removeEventListener('mousemove', handleWindowMouseMove);
  };
}, []);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们为useEffect 钩子传递空的依赖数组，因为我们只想在组件挂载时，注册mousemove 一次。

当组件卸载时，从useEffect 钩子返回的函数会被调用。

我们使用removeEventListener 方法来移除之前注册的事件监听。清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。

# screenX/Y属性

screenX属性返回全局坐标中鼠标的水平坐标（偏移）。

screenY属性返回全局坐标中鼠标的垂直坐标（偏移）。

React技巧之用钩子clearTimeout React技巧之设置target=_blank