使用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的偏移（）方式手柄父定位，所以

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

是普通浏览器抽象的jquery。

Answer 3

尝试offsetParent属性。 http://help.dottoro.com/ljetdvkl.php

尝试这样的： 位X =的document.getElementById（ 'childID的'）offsetParent.offsetLeft。 位置▲=的document.getElementById（ 'childID的'）offsetParent.offsetLeft;