Javascript: Get posizione del mouse relativa al elemento padre

Question

C'è un modo per ottenere la posizione del mouse rispetto ad esso dell'elemento genitore?

dire Let Ho una struttura:

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

Quando ho portare il mio mouse sopra elemento span ho bisogno di ottenere la sua posizione rispetto al suo elemento genitore (<div id="parent">). PageX / clientX Dammi posizione rispetto alla zona page / cliente, in modo non funziona per me.

Answer 1

Sottrarre la posizione dell'elemento genitore (offsetLeft; offsetTop) dalla posizione del mouse (pageX; Pagey) per ottenere la posizione relativa. Ricordatevi di prendere offsetParent in considerazione se si dispone di più livelli di offset.

Ad esempio:

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

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

Dove element è proprio elemento interno riceve l'evento, e parent è vostro riferimento desiderata per le coordinate.

Answer 2

all'offset jQuery () Metodo di maniglie posizionamento genitore, quindi

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

è sotto gli occhi del browser jquery astratto.

Answer 3

Prova la proprietà offsetParent. http://help.dottoro.com/ljetdvkl.php

Prova questo: positionX = document.getElementById ( 'childId') offsetParent.offsetLeft.; positionY = document.getElementById ( 'childId') offsetParent.offsetLeft;.