如何获得鼠标坐标相对于父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的股利。

到目前为止，我有这个;

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

从本质上说： 'mouseposition' - '父元素位置'= '相对于父元素mouseposition'

所以在这里我修改你的函数：

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 

这里是一个working demo fiddle。正如你可以在代码中看到的那样，它也会查看文档的滚动位置。

PPK的文章'event properties'和'find position'（一如既往）是一个很好的阅读！

希望这会有所帮助！

更新：
我居然发现在PPK的代码中的错误（多么难得的是？）：我纠正错误var在：
if (!e) var e = window.event;到if (!e){e = window.event;}

Answer 2

获取screenX和screenY属性来看到鼠标在屏幕上（也可能采取scrollHeight属性考虑！）。

然后得到的容器元素的左侧和顶部，并计算它们之间的偏移量：即在元件的鼠标的位置。

详情请参阅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

接受的答案并没有在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}; 
}