Question

9

How can I get the mouse coordinates relative to a parent div? Javascript

rated 0 times [ 13] [ 4] / answers: 1 / hits: 41154 / 11 Years ago, mon, april 22, 2013, 12:00:00

I currently have a div structured with other elements inside of it.

Something similar to below;

<div id=container style=position: relative; width: 500px; height: 500px;>

     <div style=position: absolute; left: 50px; top: 50px;></div>

     <div style=position: absolute; left: 100px; top: 100px;></div>

</div>

I am trying to get the mouse position relative to the div with the id container.

So far I have this;

function onMousemove(event) {



    x = event.offsetX;

    y = event.offsetY;

};



var elem = document.getElementById(container);

elem.addEventListener(mousemove, onMousemove, false);

This works fine if the div with the id container has no children. When the container div has children it gets the mouse co-ordinates relative to the child rather than the parent.

What I mean by this is if the mouse was at a position of x: 51, y: 51 relative to the parent div, it would actually return x: 1, y: 1 relative to the child div, using the html given above.

How can I achieve what I want, no libraries please.

EDIT

tymeJV has kindly made a jsfiddle of what is happening above.

http://jsfiddle.net/N6PJu/1

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

answered 11 Years ago taylert · Accepted Answer

In essence: 'mouseposition' - 'parent element position' = 'mouseposition relative to parent element'

So here I modified your function:

function onMousemove(e){

    var m_posx = 0, m_posy = 0, e_posx = 0, e_posy = 0,

           obj = this;

    //get mouse position on document crossbrowser

    if (!e){e = window.event;}

    if (e.pageX || e.pageY){

        m_posx = e.pageX;

        m_posy = e.pageY;

    } else if (e.clientX || e.clientY){

        m_posx = e.clientX + document.body.scrollLeft

                 + document.documentElement.scrollLeft;

        m_posy = e.clientY + document.body.scrollTop

                 + document.documentElement.scrollTop;

    }

    //get parent element position in document

    if (obj.offsetParent){

        do { 

            e_posx += obj.offsetLeft;

            e_posy += obj.offsetTop;

        } while (obj = obj.offsetParent);

    }

    // mouse position minus elm position is mouseposition relative to element:

    dbg.innerHTML = ' X Position: ' + (m_posx-e_posx) 

                  + ' Y Position: ' + (m_posy-e_posy);

}



var elem = document.getElementById('container');

elem.addEventListener('mousemove', onMousemove, false);



var dbg=document.getElementById('dbg');  //debut output div instead of console

Here is a working demo fiddle. As you can read in the code, this also looks at the document's scroll position.

PPK's article on 'event properties' and 'find position' are (as always) a good read!

Hope this helps!

Update:

I actually found an error in ppk's code (how rare is that?!): I corrected the erroneous var in:

if (!e) var e = window.event; to if (!e){e = window.event;}