Wie kann ich die Mauskoordinaten relativ zu einem Elternteil div bekommen? Javascript

Question

Ich habe derzeit ein div mit anderen Elementen darin strukturiert.

Ähnlich wie unten;

<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> 

Ich versuche, die Mausposition in Bezug auf die div mit der ID container zu bekommen.

Bisher habe ich das;

function onMousemove(event) { 

    x = event.offsetX; 
    y = event.offsetY; 
}; 

var elem = document.getElementById("container"); 
elem.addEventListener("mousemove", onMousemove, false); 

Dies funktioniert gut, wenn die div mit der ID container keine Kinder hat. Wenn das div container Kinder hat, erhält es die Mauskoordinaten relativ zum Kind und nicht zum Elternteil.

Was ich damit meine ist, wenn die Maus an einer Position x: 51, y: 51 relativ zum übergeordneten div war, wäre es tatsächlich x: 1, y: 1 relativ zum Kind div zurückzukehren, die mit HTML oben.

Wie kann ich erreichen, was ich will, keine Bibliotheken bitte.

EDIT

tymeJV hat freundlicherweise eine jsfiddle von dem, was oben geschieht.

http://jsfiddle.net/N6PJu/1

Answer 1

Im Wesentlichen: 'mouseposition' - 'Mutterelementposition' = 'mouseposition in Bezug auf übergeordnetes Element'

Also hier modifizierte ich Ihre Funktion:

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 

Hier ist ein working demo fiddle. Wie Sie im Code nachlesen können, wird auch die Scroll-Position des Dokuments angezeigt.

PPKs Artikel auf 'event properties' und 'find position' sind (wie immer) ein gutes Buch!

Hoffe, das hilft!

Update:
Ich fand tatsächlich einen Fehler in ppk Code (wie selten ist das ?!): Korrigierte ich die irrtümliche var in:
if (!e) var e = window.event;-if (!e){e = window.event;}

Answer 2

Holen Sie sich die screenX und screenY Eigenschaften, um zu sehen, wo die Maus auf dem Bildschirm (und möglicherweise die Scrollheight berücksichtigen!).

Dann erhalten Sie die linken und oberen Rand des Containerelements und berechnen Sie den Versatz zwischen ihnen: das ist die Position der Maus im Element.

Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/DOM/MouseEvent.

Answer 3

Html

<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> 

Javascript

function onMousemove(event) { 
    x = event.layerX; // position x relative to div 
    y = event.layerY; // position y relative to div 
}; 

var elem = document.getElementById("container"); 
elem.addEventListener("mousemove", onMousemove, false); 

Answer 4

Die akzeptierte Antwort nicht für mich in Chrome nicht funktioniert. Hier ist, wie ich es gelöst:

function relativeCoords (event) { 
    var bounds = event.target.getBoundingClientRect(); 
    var x = event.clientX - bounds.left; 
    var y = event.clientY - bounds.top; 
    return {x: x, y: y}; 
}