如何使用 React 17 获取 div（而不是其子项）的鼠标事件的鼠标 X 位置？

Posted 2023-05-08

【中文标题】如何使用 React 17 获取 div（而不是其子项）的鼠标事件的鼠标 X 位置？

【英文标题】：How to get mouse X position of a mouse event of a div (and not of its children) with React 17?

【发布时间】：2021-12-25 00:20:45

【问题描述】：

我有一个简单的 sn-p，我将 onMouseMove 侦听器附加到给定的 div：

<div onMouseMove=handleMouseMove>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

我想知道鼠标指针在我将鼠标侦听器附加到的父 div 中的 X 位置。但是，该事件似乎只包含对子 div（如 target）和根（如 currentTarget）的引用。

事件的nativeEvent 属性似乎也没有帮助。

我在 React 17 上。我认为这会让事情变得更难，因为之前 currentTarget 会指向我放置监听器的那个 div，但在 React 17 上，这些监听器指向根目录。

如何获取我附加监听器的 div 内的坐标？

谢谢！

【参考方案1】：

这在react 版本17.0.2 中按预期工作

function Component() 
  const onMouseMove = (e) => 
    let rect = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - rect.left;
    let y = e.clientY - rect.top;

    console.log(x, y);
  ;
  return (
    <div onMouseMove=onMouseMove>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  );

基于this 的回答和评论，关于使用currentTarget

【讨论】：

啊，边界矩形的好技巧。谢谢！