如何使用JS查找页面中鼠标指针最近的元素？

核心逻辑很直接：先获取鼠标实时坐标，遍历目标元素算出每个元素到鼠标的距离，最后用数组方法筛选出距离最小的那个。下面是具体实现步骤和代码：

步骤拆解 #

• 获取鼠标坐标：监听mousemove事件，从事件对象里提取clientX和clientY（鼠标在视口内的坐标）。
• 获取目标元素集合：用document.querySelectorAll()选中你要检查的元素（比如所有带.target类的元素，或者特定标签）。
• 计算元素到鼠标的距离：
  1. 对每个元素调用getBoundingClientRect()，拿到它的位置和尺寸数据。
  2. 算出元素的中心坐标：elemCenterX = rect.left + rect.width / 2，elemCenterY = rect.top + rect.height / 2。
  3. 用距离平方值比较（省略开根号，提升性能，排序逻辑和实际距离一致）。
• 用数组函数筛选最近元素：把元素集合转成数组后，用reduce()遍历比较，记录距离最小的元素。

完整代码示例 #

// 监听鼠标移动事件
document.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  // 获取所有目标元素（这里选所有div，可替换成自定义选择器）
  const elements = document.querySelectorAll('div');
  if (elements.length === 0) return;

  // 转成数组后用reduce找出最近元素
  const closestElement = Array.from(elements).reduce((closest, current) => {
    const rect = current.getBoundingClientRect();
    // 计算元素中心坐标
    const elemCenterX = rect.left + rect.width / 2;
    const elemCenterY = rect.top + rect.height / 2;

    // 计算距离平方值（省掉开根号，提升性能）
    const distanceSquared = Math.pow(elemCenterX - mouseX, 2) + Math.pow(elemCenterY - mouseY, 2);

    // 第一次遍历直接返回当前元素，后续比较距离更新结果
    if (!closest) return { element: current, distance: distanceSquared };
    return distanceSquared < closest.distance ? { element: current, distance: distanceSquared } : closest;
  }, null).element;

  // 示例操作：高亮最近元素
  elements.forEach(el => el.classList.remove('closest'));
  closestElement.classList.add('closest');
  console.log('最近的元素:', closestElement);
});

关键属性/函数说明 #

• e.clientX/e.clientY：鼠标在视口内的坐标，是距离计算的基础。
• getBoundingClientRect()：返回元素的位置（left/top/right/bottom）和尺寸（width/height），用来计算元素中心。
• Array.from()：把DOM元素的NodeList转成数组，这样就能使用数组的reduce()方法。
• reduce()：遍历数组时记录当前距离最小的元素，是实现筛选的核心数组函数。

内容的提问来源于stack exchange，提问作者Lil_VuV