I have a simple snippet where I attach a onMouseMove listener to a given div:

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

I want to know the X position of the mouse pointer within the parent div where I attached the mouse listener to. However, the event seems to only contain references to the children divs (as target), and the root (as currentTarget).

The event's nativeEvent property also is not helping it seems.

I'm on React 17. I think this is making it harder as previously the currentTarget would point to that div where I placed the listener to, but on React 17 these listeners to the root.

How can I get the coordinates within the div I attached the listener to?

Thanks!

I have a simple snippet where I attach a onMouseMove listener to a given div:

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

I want to know the X position of the mouse pointer within the parent div where I attached the mouse listener to. However, the event seems to only contain references to the children divs (as target), and the root (as currentTarget).

The event's nativeEvent property also is not helping it seems.

I'm on React 17. I think this is making it harder as previously the currentTarget would point to that div where I placed the listener to, but on React 17 these listeners to the root.

How can I get the coordinates within the div I attached the listener to?

Thanks!

• javascript
• reactjs
• mouseevent
• mousemove

1 Answer 1

This works as expected in react version 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>
  );
}

Based on this answer and a ment on it, about using a currentTarget