javascript - How to get mouse X position of a mouse event of a div (and not of its children) with React 17? - Stack Overflow

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

Share Improve this question Follow asked Nov 12, 2021 at 17:02 Edy BourneEdy Bourne 6,2061616 gold badges6161 silver badges114114 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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