Come posso ottenere le coordinate del mouse relative a un div padre? Javascript

Question

Attualmente ho un div strutturato con altri elementi al suo interno.

Qualcosa di simile al basso;

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

io sto cercando di ottenere la posizione del mouse rispetto al div con l'ID container.

Finora ho questo;

function onMousemove(event) { 

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

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

Questo funziona bene se il div con l'ID container non ha figli. Quando il div container ha figli, ottiene le coordinate del mouse relative al figlio piuttosto che al genitore.

Ciò che intendo con questo è se il mouse era in una posizione di x: 51, y: 51 relativo al div padre, in realtà restituirebbe x: 1, y: 1 relativo al div figlio, utilizzando l'html indicato in precedenza.

Come posso ottenere ciò che voglio, nessuna libreria per favore.

EDIT

tymeJV ha gentilmente fatto una jsfiddle di ciò che accade sopra.

http://jsfiddle.net/N6PJu/1

Answer 1

In sostanza: 'mouseposition' - 'posizione dell'elemento padre' = 'mouseposition rispetto all'elemento genitore'

Così qui ho modificato la funzione:

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 

Ecco un working demo fiddle. Come puoi leggere nel codice, questo guarda anche la posizione di scorrimento del documento.

L'articolo di PPK su "event properties" e "find position" sono (come sempre) una buona lettura!

Spero che questo aiuti!

Aggiornamento:
in realtà ho trovato un errore nel codice di PPK (quanto raro è quello ?!): Ho corretto l'erronea var in:
if (!e) var e = window.event; al if (!e){e = window.event;}

Answer 2

ottenere le proprietà screenX e Screeny per vedere dove il mouse si trova sullo schermo (ed eventualmente prendere lo scrollHeight in considerazione!).

Quindi ottenere la sinistra e la parte superiore dell'elemento contenitore e calcolare l'offset tra di loro: ovvero la posizione del mouse nell'elemento.

Vedere https://developer.mozilla.org/en-US/docs/DOM/MouseEvent per ulteriori dettagli.

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

La risposta accettata non ha funzionato per me in Chrome. Ecco come ho risolto:

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