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。

Answer 3

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

试试这个： positionX = document.getElementByID（'childId'）。offsetParent.offsetLeft; positionY = document.getElementByID（'childId'）。offsetParent.offsetLeft;

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

3 个答案: