如何獲得鼠標座標相對於父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}; 
}