React中能否获取鼠标相对于元素（组件、div、img）的位置？

嘿，这俩问题其实是一回事儿——当然可以获取鼠标相对于React里div、img这类元素的位置啦！先聊聊你写的代码，再给你更稳妥的实现思路~

先说说你的代码里需要注意的点 #

你用this.refs.elem.getDOMNode()的方式在React新版本里已经被废弃啦，现在推荐用createRef（类组件）或者useRef（函数组件）来获取DOM元素。另外e.nativeEvent.offsetX/offsetY本身就是鼠标相对于触发事件元素的位置，不过在一些复杂场景（比如元素有嵌套、带padding/border样式）下可能会有偏差，更可靠的方式是结合getBoundingClientRect()来计算。

类组件的完善实现 #

这里用React官方推荐的createRef来获取元素，再通过视口坐标计算相对位置：

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { relativeX: 0, relativeY: 0 };
    // 创建ref关联目标元素
    this.targetElem = React.createRef();
  }

  handleMouseMove = (e) => {
    const elem = this.targetElem.current;
    // 确保元素已挂载
    if (!elem) return;

    // 获取元素相对于视口的位置信息
    const elemRect = elem.getBoundingClientRect();
    // 计算鼠标相对于元素左上角的坐标
    const relativeX = e.clientX - elemRect.left;
    const relativeY = e.clientY - elemRect.top;

    this.setState({ relativeX, relativeY });
    console.log(`相对元素位置：X=${relativeX}, Y=${relativeY}`);
  };

  render() {
    return (
      <div
        ref={this.targetElem}
        onMouseMove={this.handleMouseMove}
        style={{ 
          width: '400px', 
          height: '400px', 
          backgroundColor: '#f0f0f0',
          border: '1px solid #ccc'
        }}
      >
        鼠标相对位置：X={this.state.relativeX}, Y={this.state.relativeY}
      </div>
    );
  }
}

函数组件的实现（现在更常用的写法） #

如果是用函数组件，搭配useRef和useState就能轻松实现：

import { useRef, useState } from 'react';

function MouseTracker() {
  const [relativePos, setRelativePos] = useState({ x: 0, y: 0 });
  const targetElem = useRef(null);

  const handleMouseMove = (e) => {
    const elem = targetElem.current;
    if (!elem) return;

    const elemRect = elem.getBoundingClientRect();
    const x = e.clientX - elemRect.left;
    const y = e.clientY - elemRect.top;
    setRelativePos({ x, y });
  };

  return (
    <div
      ref={targetElem}
      onMouseMove={handleMouseMove}
      style={{ 
        width: '400px', 
        height: '400px', 
        backgroundColor: '#f0f0f0',
        border: '1px solid #ccc'
      }}
    >
      鼠标相对位置：X={relativePos.x}, Y={relativePos.y}
    </div>
  );
}

核心逻辑说明 #

• e.clientX/e.clientY：鼠标指针相对于浏览器视口左上角的坐标
• elem.getBoundingClientRect().left/top：目标元素左上角相对于视口的坐标
• 两者相减就能得到鼠标相对于目标元素左上角的精确位置，这种方法兼容性更好，不受元素嵌套、样式影响。

内容的提问来源于stack exchange，提问作者Fernando Antunes