Javascript: Obtenir la position de la souris par rapport à l'élément parent

Question

Y at-il un moyen d'obtenir la position de la souris par rapport à son élément parent?

Disons que j'ai une structure:

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

Quand j'apporter ma souris sur span élément que je dois obtenir sa position par rapport à son élément parent (<div id="parent">). PageX/ClientX me donne la position par rapport à la page/la zone client, donc ça ne marche pas pour moi.

Answer 1

Soustrayez la position de l'élément parent (offsetLeft; offsetTop) de la position de la souris (pageX; pageY) pour obtenir la position relative. N'oubliez pas de prendre en compte offsetParent si vous avez plusieurs niveaux de décalage.

Par exemple:

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

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

Lorsque element est votre élément intérieur de réception de l'événement, et parent est votre référence pour les coordonnées souhaitée.

Answer 2

Essayez la propriété offsetParent. http://help.dottoro.com/ljetdvkl.php

Essayez ceci: positionX = document.getElementById ('childId') offsetParent.offsetLeft;. positionY = document.getElementByID ('childId'). OffsetParent.offsetLeft;

Answer 3

jquery offset() Méthode gère le positionnement de parent, de sorte

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

est extrait brut jquery navigateur.