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

Question

我有一个简单的片段，我将 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 中的坐标？

谢谢！

Answer 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

如何使用 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?

javascript

mouseevent

mousemove

reactjs