Take the 2-minute tour ×

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>

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.

Any suggestions are greatly appreciated.

Thank you.

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

Subtract the position of the parent element (offsetLeft; offsetTop) from the mouse position (pageX; pageY) to get relative position. Remember to take offsetParent into account if you have multiple levels of offsets.

share|improve this answer
add comment

jquery offset() method handles parent positioning, so

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

is plain browser abstracted jquery.

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

Try the offsetParent property. http://help.dottoro.com/ljetdvkl.php

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

share|improve this answer
add comment

Your Answer


