Take the 2-minute tour ×  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>  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.   tymeJV has kindly
made a jsfiddle of what