前端开发中，经常需要获取鼠标在页面上的位置，特别是在与用户交互的场景下。但是，有时候我们需要知道鼠标相对于某个元素的位置，而不是页面的位置。这篇文章将介绍如何使用 JavaScript 查找鼠标相对于元素的位置，并提供示例代码。
定义鼠标相对于元素的位置
在介绍具体实现方法之前，先来定义一下什么是鼠标相对于元素的位置。鼠标相对于元素的位置指的是鼠标在元素内部的坐标值（x, y），其中 x 表示鼠标距离元素左边界的像素值，y 表示鼠标距离元素上边界的像素值。
实现方法
要查找鼠标相对于元素的位置，我们需要以下信息：
- 鼠标在页面上的位置
- 元素在页面上的位置
- 元素的尺寸
有了这些信息，我们可以通过一些简单的计算得到鼠标相对于元素的位置。
鼠标在页面上的位置
要获取鼠标在页面上的位置，我们可以监听 mousemove 事件并获取事件对象的 pageX 和 pageY 属性。例如：
document.addEventListener('mousemove', function(event) {
const mouseX = event.pageX;
const mouseY = event.pageY;
});元素在页面上的位置和尺寸
要获取元素在页面上的位置和尺寸，我们可以使用 getBoundingClientRect() 方法。这个方法返回一个包含元素位置和尺寸信息的对象。
const element = document.getElementById('element');
const rect = element.getBoundingClientRect(); // 返回的是相对于视口的坐标值
const elementX = rect.left;
const elementY = rect.top;
const elementWidth = rect.width;
const elementHeight = rect.height;计算鼠标相对于元素的位置
有了以上两个步骤的信息，我们就可以开始计算鼠标相对于元素的位置了。具体计算公式如下：
const mouseXRelativeToElement = mouseX - elementX; const mouseYRelativeToElement = mouseY - elementY;
最后，我们得到了鼠标相对于元素的位置（mouseXRelativeToElement 和 mouseYRelativeToElement），可以根据需要进行其他操作。
示例代码
下面是完整的示例代码，其中假设我们需要查找鼠标相对于 ID 为 element 的元素的位置：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------
-------
------
---- ------------ ------------- ------ ------- ------ ----------------- -------------
--------
----- ------- - -----------------------------------
------------------------------------- --------------- -
----- ------ - ------------
----- ------ - ------------
----- ---- - --------------------------------
----- -------- - ----------
----- -------- - ---------
----- ----------------------- - ------ - ---------
----- ----------------------- - ------ - ---------
------------------------ ---------------------------- ------------------------------
---
---------
-------
-------以上就是如何查找鼠标相对于元素的位置的方法和示例代码。希望对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10276
