Javascript: Holen relativ Mausposition zu übergeordnetes Element

Question

Gibt es eine Möglichkeit Mausposition relativ zu seinen Eltern-Element zu erhalten?

Lassen Sie uns sagen, ich habe eine Struktur:

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

Wenn ich meine Maus über span Element bringen muß ich seine Position relativ zu seinem übergeordneten Elemente (<div id="parent">) erhalten. PageX / clientX give me Position in Bezug auf Seite / Client-Bereich, so dass es für mich nicht funktioniert hat.

Answer 1

Subtrahiere die Position des Mutterelements (offsetleft; offsetTop) von der Mausposition (pageX; pageY) relative Position zu erhalten. Denken Sie daran, offset zu berücksichtigen, wenn Sie mehrere Ebenen von Offsets haben.

Zum Beispiel:

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

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

Wo element ist Ihre innere Element Empfang des Ereignisses, und parent ist die gewünschte Referenz für die Koordinaten.

Answer 2

jquery Offset () Methode behandelt Mutter Positionierung, so

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

ist klar Browser abstrahierten jquery.

Answer 3

Versuchen Sie, die offset Eigenschaft. http://help.dottoro.com/ljetdvkl.php

Versuchen Sie folgendes: PositionX = document.getElementById ( 'childID') offsetParent.offsetLeft. PositionY = document.getElementById ( 'childID') offsetParent.offsetLeft;.