Javascript: obtener la posición del mouse relativo al elemento principal

Question

¿Hay alguna forma de obtener la posición del mouse en relación con su elemento principal?

Digamos que tengo una estructura:

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

Cuando traigo mi ratón sobre span elemento que necesito para obtener su posición con respecto a su elemento padre (<div id="parent">). PageX/ClientX me da una posición relativa al área de la página/cliente, por lo que no funciona para mí.

Answer 1

Reste la posición del elemento principal (offsetLeft; offsetTop) desde la posición del mouse (pageX; pageY) para obtener la posición relativa. Recuerde tener en cuenta offsetParent si tiene múltiples niveles de compensaciones.

Por ejemplo:

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

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

Dónde element es su elemento interior de recibir el evento, y parent es su referencia deseado para las coordenadas.

Answer 2

Pruebe la propiedad offsetParent. http://help.dottoro.com/ljetdvkl.php

Prueba esto: positionX = document.getElementById ('childid') offsetParent.offsetLeft;. positionY = document.getElementByID ('childId'). OffsetParent.offsetLeft;

Answer 3

jQuery desplazamiento() método maneja posición de los padres, por lo

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

es el navegador sencillo abstraída jQuery.