Javascript: Obtener la posición del ratón relativa al elemento padre

Question

¿Hay alguna manera de obtener la posición del ratón respecto a ella de elemento padre?

Vamos a decir que tengo una estructura:

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

Cuando traigo mi ratón sobre el elemento span que necesita para obtener su posición con respecto a su elemento padre (<div id="parent">). PágX / clientX Dame posición con respecto al área de página / cliente, por lo que no funciona para mí.

Answer 1

Restar la posición del elemento padre (offsetLeft; offsetTop) a partir de la posición del ratón (pageX; pageY) para obtener posición relativa. Recuerde que debe tener en cuenta offsetParent si tiene varios 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);
});

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

Answer 2

jquery offset () asas método de posicionamiento de los padres, así

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

es el navegador sencillo jQuery abstraída.

Answer 3

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

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