Javascriptが：親要素を基準にしたマウス位置を取得します。

Question

それの親要素にマウス位置を取得する方法はありますか？

私は構造を持ってみましょうと言うます：

<div id="parent">
    <span class="dot"></span>
</div>

私はspan要素の上に私のマウスを持って私は、その親要素（<div id="parent">）との相対位置を取得する必要があります。 PageX / ClientXそれは私のために働いていないので、ページ/クライアント領域に対する相対位置を私に与えています。

Answer 1

相対位置を取得するために、マウスの位置（pageY pageX）から、

の親要素（offsetTop offsetLeft）の位置を引きます。あなたはオフセットの複数のレベルを持っている場合は、アカウントにoffsetParentのを取ることを忘れないでください。

例えば、

element.addEventListener("mousedown", function (e) {
  let x = e.pageX - parent.offsetLeft;
  let y = e.pageY - parent.offsetTop;

  console.log(x, y);
});

elementはあなたの内イベントを受光素子、及びparentある

は座標のためのあなたの所望の基準である。

Answer 2

の jQueryのオフセット（）の方法でハンドル親位置決めので

function onsomemouseevent(e) {
    var x = e.pageX - $(e.target).offset().left;
}

プレーンなブラウザ抽象化jqueryのです。

Answer 3

offsetParentのプロパティを試してみてください。 http://help.dottoro.com/ljetdvkl.phpする

これを試してみてください。 positionX =のdocument.getElementById（ 'たchildID'）offsetParent.offsetLeft。 位置j =のdocument.getElementById（ 'たchildID'）offsetParent.offsetLeft;