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

Question

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

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

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

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

Answer 1

Вычтите положение родительского элемента (OffssetLeft; Offsettop) из положения мыши (Pagex; Pagey), чтобы получить относительную позицию. Не забудьте принять во внимание, если у вас есть несколько уровней смещений.

Например:

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

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

Попробуйте это: positionx = document.getelementbyId ('chaindid'). OffsetParent.Offsetleft; positiony = document.getelementbyId ('chameidid'). OffsetParent.Offsetleft;