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

29

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

61,328
9
119
152

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

@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

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

8,887
6
48
79

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

score 0 · Answer 3 · edited Dec 02 '21 at 12:34

0

Try the offsetParent property.

Try this:

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

edited Dec 02 '21 at 12:34

Satpal

129,808
12
152
166

answered Apr 10 '10 at 18:46

Joshua Enfield

16,662
9
48
94

should be `.getElementById(...)` – Benvorth Jul 21 '17 at 13:59

Javascript: Get mouse position relative to parent element

3 Answers3

Linked