Como posso obter as coordenadas do mouse em relação a um div pai? Javascript
Eu atualmente tenho um div estruturado com outros elementos dentro dele.
Algo semelhante ao abaixo;
<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>
Eu estou tentando obter a posição do mouse em relação ao div com o idcontainer.
Até agora eu tenho isso;
function onMousemove(event) {
x = event.offsetX;
y = event.offsetY;
};
var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);
Isso funciona bem se o div com o idcontainer não tem filhos. Quando ocontainer div tem filhos, obtém as coordenadas do mouse em relação à criança e não ao pai.
O que quero dizer com isso é se o mouse estava em uma posição dex: 51, y: 51 em relação ao pai div, ele realmente retornariax: 1, y: 1 em relação à div infantil, usando o html dado acima.
Como posso conseguir o que quero, sem bibliotecas, por favor.
EDITAR
tymeJV gentilmente fez um jsfiddle do que está acontecendo acima.