Javascript: получить положение мыши относительно родительского элемента

Question

Есть ли способ получить положение мыши относительно родительского элемента?

Допустим, у меня есть структура:

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

Когда я наведу указатель мыши на элемент span, мне нужно узнать его положение относительно родительского элемента (<div id="parent">). PageX / ClientX дают мне позицию относительно страницы / клиентской области, поэтому она не работает для меня.

Answer 1

Вычтите положение родительского элемента (offsetLeft; offsetTop) из позиции мыши (pageX; pageY), чтобы получить относительную позицию. Не забудьте учесть offsetParent, если у вас есть несколько уровней смещений.

Например:

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

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

Где element - ваш внутренний элемент, принимающий событие, а parent - желаемая ссылка на координаты.

Answer 2

jquery offset () метод обрабатывает родительское позиционирование, поэтому

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

- простой jQuery для браузера.

Answer 3

Попробуйте свойство offsetParent. http://help.dottoro.com/ljetdvkl.php

Попробуйте это: positionX = document.getElementByID ('childId'). offsetParent.offsetLeft; positionY = document.getElementByID ('childId'). offsetParent.offsetLeft;