javascript - Javascript：親要素に対するマウスの位置を取得します

Question

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

私が構造を持っているとしましょう：

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

マウスをspan要素の上に置くとき、親要素（<div id="parent">）に対する相対的な位置を取得する必要があります。PageX / ClientXは、ページ/クライアント領域に対する相対的な位置を教えてくれるので、うまくいきません。

Answer 1

getBoundingClientRect()イベント内のマウス位置から取得できる親要素のビューポート相対位置を減算し、相対位置を取得しclientXますclientY。

例えば：

element.addEventListener("mousedown", function (e) {
    let bounds = parent.getBoundingClientRect();
    let x = e.clientX - bounds.left;
    let y = e.clientY - bounds.top;

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

elementイベントを受信する内部要素はどこにありparent、座標の必要な参照です。

Answer 2

jquery offset（）メソッドは親の配置を処理するため、

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

プレーンブラウザで抽象化されたjqueryです。

Answer 3

offsetParentプロパティを試してください。

これを試して：

positionX = document.getElementByID('childId').offsetParent.offsetLeft;
positionY = document.getElementByID('childId').offsetParent.offsetLeft;