Javascript：获取相对于父元素的鼠标位置 [英] Javascript: Get mouse position relative to parent element

问题描述

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

Is there any way to get mouse position relative to it's parent element?

假设我有一个结构：

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

当我将鼠标悬停在 span 元素上时我需要获得相对于其父元素的位置（< div id =parent> ）。 PageX / ClientX给我相对于页面/客户区的位置，所以它对我不起作用。

When I bring my mouse over span element I need to get its position relative to its parent element (<div id="parent">). PageX/ClientX give me position relative to page/client area, so it's not working for me.

推荐答案

减去位置父元素（offsetLeft; offsetTop）从鼠标位置（pageX; pageY）获取相对位置。如果您有多个偏移级别，请记住将offsetParent考虑在内。

Subtract the position of the parent element (offsetLeft; offsetTop) from the mouse position (pageX; pageY) to get relative position. Remember to take offsetParent into account if you have multiple levels of offsets.

例如：

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

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

其中元素是您的内部元素接收事件，父是您想要的坐标参考。

Where element is your inner element receiving the event, and parent is your desired reference for the coordinates.

这篇关于Javascript：获取相对于父元素的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！