Javascript: Get mouse position relative to parent element

Question

Is there any way to get mouse position relative to it's parent element?

Let's say I have a structure:

<div id="parent">
    <span class="dot"></span>
</div>

When I bring my mouse over span element I need to get its position relative to its parent element (<div id="parent">). PageX/ClientX give me position relative to page/client area, so it's not working for me.

Matti Virkkunen · Accepted Answer · 2020-04-12T15:33:35.273

45

Subtract the viewport-relative position of the parent element you can get via getBoundingClientRect() from the mouse position in the event's clientX and clientY to get relative position.

For example:

element.addEventListener("mousedown", function (e) {
    let bounds = parent.getBoundingClientRect();
    let x = e.clientX - bounds.left;
    let y = e.clientY - bounds.top;

    console.log(x, y);
});

Where element is your inner element receiving the event, and parent is your desired reference for the coordinates.

edited Apr 12 '20 at 15:33

answered Apr 10 '10 at 18:37

Matti Virkkunen

63,558
9
127
159

this doesn't work if some descendant element uses relative or absolute positioning. – Robert Apr 11 '20 at 18:15
2

@Robert Seems that somebody added code to my answer without actually reading the answer and added incorrect code. I've updated it now with a better method. – Matti Virkkunen Apr 12 '20 at 15:33
You're a beast, thank you! – LoveriusB Jan 14 '22 at 14:06
This! Lifesaver! – Sven Cazier Jun 20 '23 at 11:23

score 5 · Answer 2 · answered Jul 03 '12 at 11:01

5

jquery offset() method handles parent positioning, so

function onsomemouseevent(e) {
    var x = e.pageX - $(e.target).offset().left;
}

is plain browser abstracted jquery.

answered Jul 03 '12 at 11:01

citykid

9,916
10
55
91

1

May be also useful to use e.currentTarget, when you are working with element with child elements – malloc4k Dec 27 '13 at 17:29

Corey P · Answer 3 · 2023-04-20T19:53:22.780

Here is a React specific example, but I assume the concepts would work even outside React.

onMouseMove={(e) => {
   var x = e.clientX - e.currentTarget.offsetLeft;
   var y = e.clientY - e.currentTarget.offsetTop;

   // Do something with x and y
}}

Also, I found that throttling the mouse move capturing is useful when you're doing a lot of computation. Here's a nice StackOverflow answer that showed how to do that.

score 0 · Answer 4 · edited Jun 07 '22 at 22:51

0

Try the offsetParent property.

Try this:

positionX = document.getElementById('childId').offsetParent.offsetLeft;
positionY = document.getElementById('childId').offsetParent.offsetLeft;

edited Jun 07 '22 at 22:51

Dharman

30,962
25
85
135

answered Apr 10 '10 at 18:46

Joshua Enfield

17,642
10
51
98

Javascript: Get mouse position relative to parent element

4 Answers4

Linked