web-dev-qa-db-ja.com

親divに相対的なマウス座標を取得するにはどうすればよいですか？ JavaScript

私は現在、その中に他の要素で構成された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の位置にあった場合、実際には、上記のhtmlを使用して、子divに対してx: 1, y: 1を返します。

どうすれば私が望むものを達成できますか？.

[〜＃〜]編集[〜＃〜]

tymeJVは親切に、上記で起こっていることのjsfiddleを作成しました。

http://jsfiddle.net/N6PJu/1

javascripteventsmousemove
21
GriffLab

本質的には、「マウス位置」-「親要素の位置」=「親要素に対するマウス位置」

だからここで私はあなたの関数を変更しました：

_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の記事は（いつものように）読みやすくなっています！

お役に立てれば！

更新：
私は実際にppkのコードにエラーを見つけました（これはどれほどまれですか？！）：誤ったvarを修正しました：
if (!e) var e = window.event; to if (!e){e = window.event;}

5
GitaarLAB

受け入れられた回答は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};
}
51
Nikita Volkov

ScreenXプロパティとscreenYプロパティを取得して、マウスが画面のどこにあるかを確認します（場合によっては、scrollHeightも考慮してください）。

次に、コンテナ要素の左と上を取得し、それらの間のオフセットを計算します。つまり、要素内でのマウスの位置です。

詳細は https://developer.mozilla.org/en-US/docs/DOM/MouseEvent を参照してください。

1
Willem Mulder

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);
0
Le Fem