Javascript:获取相对于父元素的鼠标位置

Question

有没有办法让鼠标位置相对于它的父元素？

假设我有一个结构:

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

当我将鼠标放在span元素上时,我需要获得相对于其父元素(<div id="parent">)的位置.PageX/ClientX给我相对于页面/客户区的位置,所以它对我不起作用.

Answer 1

从鼠标位置(pageX; pageY)中减去父元素(offsetLeft; offsetTop)的位置以获得相对位置.如果您有多个级别的偏移,请记住将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.