javascript - 如何获取相对于父 div 的鼠标坐标？ JavaScript

Question

我目前有一个 div 结构，其中包含其他元素。

类似于下面的内容；

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

我正在尝试获取鼠标相对于 ID 为 container 的 div 的位置。

到目前为止我已经有了这个；

function onMousemove(event) {

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

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

如果 ID 为 container 的 div 没有子项，则此方法可以正常工作。当 container div 有子级时，它会获取相对于子级而不是父级的鼠标坐标。

我的意思是，如果鼠标位于相对于父 div 的 x: 51, y: 51 位置，它实际上会返回 x: 1, y: 1 相对于子 div，使用上面给出的 html。

我怎样才能实现我想要的，没有图书馆。

编辑

tymeJV 善意地对上面发生的事情做了一个 jsfiddle。

http://jsfiddle.net/N6PJu/1

Answer 1

接受的答案在 Chrome 中对我不起作用。我是这样解决的:

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