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

私は、containerというIDを持つ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の場合、上のhtmlを使用して子divに対して実際にはx: 1, y: 1が返されます。

私が望むものを実現するにはどうすればいいですか、図書館は必要ありません。 tymeJVが親切に上記の何が起こっているかのjsfiddleをした

EDIT

。

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

に
if (!e) var e = window.event;を受け入れ答えは、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}; 
}