在 React 开发中，我们经常需要监听鼠标事件，例如 onMouseEnter，以实现特定的交互效果。然而，当一个父元素内部包含多个子元素时，onMouseEnter 事件的行为可能会出乎意料。默认情况下，onMouseEnter 事件会返回实际触发事件的元素（即鼠标当前悬停的元素），如果鼠标悬停在父元素内的子元素上，事件目标将是该子元素，而非父元素本身。这会导致在尝试获取父元素坐标时，得到的是子元素的坐标，从而引发定位不准确的问题。
理解 onMouseEnter 的默认行为
当鼠标进入一个元素区域时，onMouseEnter 事件会被触发。如果这个元素内部有其他子元素，并且鼠标从父元素区域移动到子元素区域，onMouseEnter 会在子元素上再次触发（因为从父元素“外部”进入子元素“内部”），此时事件对象的 target 属性将指向该子元素。这意味着，如果直接使用 event.target.getBoundingClientRect() 来获取坐标，你将得到子元素而非父元素的尺寸和位置信息。
例如，一个 div 内部包含一个 img 标签：
console.log(e.target.getBoundingClientRect().y)}> @@##@@
当鼠标进入 div 区域时，如果直接悬停在 div 的空白区域，你会得到 div 的 Y 坐标。但如果鼠标进入 div 后直接悬停在 img 标签上，console.log 将输出 img 的 Y 坐标，而非 div 的。这显然不符合我们希望始终以父元素为基准获取坐标的需求。
解决方案一：利用 useRef 精确获取父元素坐标
为了解决这个问题，我们可以利用 React 的 useRef Hook 来直接引用父 DOM 元素，并在事件处理函数中通过这个引用来获取父元素的尺寸和位置信息。这是最推荐且最安全的方法。
核心原理：
- 使用 useRef 创建一个可变的引用对象。
- 将这个引用对象绑定到父元素的 ref 属性上。
- 在 onMouseEnter 事件处理函数中，通过 ref.current 访问到真实的父 DOM 元素。
- 使用 getBoundingClientRect() 方法获取父元素相对于视口的位置和尺寸。
- 结合事件对象提供的鼠标当前位置 (e.clientX, e.clientY)，计算出鼠标相对于父元素内部的精确坐标。
示例代码：
首先，确保从 React 库中导入 useRef：
import React, { useRef } from 'react';
function ParentComponentWithHover() {
// 1. 创建一个 ref
const parentRef = useRef(null);
// 2. 定义鼠标进入事件处理函数
const handleMouseEnter = (e) => {
// 确保 ref.current 已经指向了 DOM 元素
if (parentRef.current) {
// 3. 获取父元素的边界矩形信息
const rect = parentRef.current.getBoundingClientRect();
// 4. 获取鼠标相对于视口（viewport）的坐标
const mouseX = e.clientX;
const mouseY = e.clientY;
// 5. 计算鼠标相对于父元素内部的坐标
// 鼠标X坐标 - 父元素左边界的X坐标 = 鼠标在父元素内的X坐标
// 鼠标Y坐标 - 父元素上边界的Y坐标 = 鼠标在父元素内的Y坐标
const relativeX = mouseX - rect.left;
const relativeY = mouseY - rect.top;
console.log(`鼠标相对于父元素的 X 坐标: ${relativeX}`);
console.log(`鼠标相对于父元素的 Y 坐标: ${relativeY}`);
console.log(`父元素在视口中的 Y 坐标: ${rect.y}`); // 始终获取父元素的 Y 坐标
}
};
return (
);
}
export default ParentComponentWithHover;
代码解释：
- useRef(null)：初始化一个 ref，其 current 属性初始值为 null。
- ref={parentRef}：当组件渲染时，React 会将 parentRef.current 设置为对应的 DOM 元素（即这个 div）。
- parentRef.current.getBoundingClientRect()：这个方法返回一个 DOMRect 对象，包含了元素的大小及其相对于视口的位置。例如：
- rect.left, rect.top: 元素左上角相对于视口左上角的 X 和 Y 坐标。
- rect.width, rect.height: 元素的宽度和高度。
- rect.x, rect.y: 等同于 rect.left 和 rect.top。
- e.clientX, e.clientY: 这是鼠标事件对象提供的属性，表示鼠标指针相对于浏览器视口（viewport）的 X 和 Y 坐标。
- relativeX = mouseX - rect.left 和 relativeY = mouseY - rect.top：通过将鼠标的视口坐标减去父元素的视口坐标，我们就能得到鼠标相对于父元素左上角的局部坐标。
这种方法确保无论鼠标悬停在父元素的哪个子元素上，甚至子元素内部的子元素上，我们始终能够获取到鼠标相对于 原始父元素 的准确位置信息。
解决方案二：使用 CSS 属性 pointer-events: none; (替代方案)
另一种更简单但通常不那么推荐的方法是，对父元素内的所有子元素应用 CSS 属性 pointer-events: none;。
核心原理：pointer-events: none; 会阻止元素成为鼠标事件的“目标”。当鼠标悬停在一个设置了 pointer-events: none; 的元素上时，鼠标事件会“穿透”它，作用于它下面的元素。这样，即使鼠标在子元素上，onMouseEnter 事件也会被父元素捕获。
示例：
function ParentComponentWithPointerEvents() {
const handleMouseEnter = (e) => {
// 此时 e.target 始终是父 div，因为子元素不捕获事件
console.log(`父元素 Y 坐标 (通过 pointer-events): ${e.target.getBoundingClientRect().y}`);
};
return (
请将鼠标移入此区域
@@##@@
);
}
export default ParentComponentWithPointerEvents;注意事项：
- 局限性： pointer-events: none; 会使该元素及其子元素（除非子元素明确设置了 pointer-events: auto;）完全无法响应任何鼠标事件，包括点击 (onClick)、拖拽 (onDrag) 等。如果你的子元素需要有自己的交互功能（例如图片可点击、按钮可点击），那么这种方法就不适用。
- 安全性： 相较于 useRef 的解决方案，这种方法不够灵活和安全，因为它改变了元素的默认交互行为。它更适用于那些纯粹的展示性子元素，且你确定它们不需要任何独立的鼠标交互。
总结
在 React 中处理 onMouseEnter 事件并确保始终获取父元素的坐标，最佳实践是使用 useRef。它提供了一种直接且可靠的方式来访问和操作 DOM 元素，从而实现精确的坐标计算，同时不影响子元素的独立交互能力。而 pointer-events: none; 是一种快速但有副作用的替代方案，应谨慎使用，仅限于子元素不需要任何鼠标交互的场景。理解这两种方法及其适用场景，将有助于你构建更健壮和用户友好的 React 应用。
