在react开发中，我们经常需要监听鼠标事件来获取元素的位置信息。onmouseenter事件是一个常用的选择，它在鼠标指针进入元素时触发。然而，当父元素内部嵌套有子元素时，onmouseenter事件的默认行为可能会导致一个常见的困扰：事件的target属性会指向实际被鼠标进入的子元素，而非我们期望的父元素。这意味着，如果子元素相对于父元素有偏移，通过event.target.getboundingclientrect()获取的坐标将是子元素的坐标，而非父元素的。
例如，考虑以下场景：
const handleOnHover = (event) => {
// 这里的 event.target 可能是内部的 Image 元素
const rect = event.target.getBoundingClientRect();
console.log("Y 轴位置:", rect.y);
};
@@##@@
当鼠标进入div时，如果直接悬停在div的空白区域，rect.y会是div的Y坐标。但如果鼠标进入的是div内部的img元素，event.target会变成img，此时rect.y将是img的Y坐标，这通常不是我们想要的结果。为了解决这个问题，我们需要一种方法来始终引用到父元素本身。
解决方案一：使用 useRef 钩子 (推荐)
useRef是React提供的一个钩子，它允许我们在函数组件中创建一个可变的引用对象，该对象在组件的整个生命周期中保持不变。我们可以将这个引用附加到DOM元素上，从而直接访问该DOM元素，而不受事件target的影响。
实现步骤：
-
导入 useRef： 在你的React组件文件顶部导入useRef。
import { useRef } from 'react'; -
创建引用： 在函数组件内部调用useRef(null)创建一个引用对象，并将其初始化为null。
const parentRef = useRef(null);
-
关联DOM元素： 将创建的ref对象赋值给需要获取其坐标的父元素的ref属性。
@@##@@ -
在事件处理函数中使用引用： 在onMouseEnter事件的处理函数中，通过parentRef.current来访问到实际的DOM元素，然后调用getBoundingClientRect()方法获取其边界框信息。
const onHover = (e) => { // 通过 ref.current 获取到父 div 的 DOM 元素 const rect = parentRef.current.getBoundingClientRect(); // 获取鼠标相对于父元素左上角的坐标 // e.clientX 和 e.clientY 是鼠标相对于视口的坐标 // rect.left 和 rect.top 是父元素相对于视口的左上角坐标 const x = e.clientX - rect.left; const y = e.clientY - rect.top; console.log(`鼠标相对于父元素的 X: ${x}, Y: ${y}`); console.log(`父元素 Y 轴位置: ${rect.y}`); // 获取父元素的 Y 轴绝对位置 };
完整示例代码：
import React, { useRef } from 'react';
function MyComponent() {
const parentRef = useRef(null); // 创建一个引用
const onHover = (e) => {
// 确保 parentRef.current 存在
if (parentRef.current) {
// 通过 ref.current 获取父 div 的 DOM 元素
const rect = parentRef.current.getBoundingClientRect();
// 获取鼠标相对于父元素左上角的坐标
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
console.log(`鼠标相对于父元素的 X: ${x}, Y: ${y}`);
console.log(`父元素 Y 轴绝对位置: ${rect.y}`);
}
};
return (
@@##@@
);
}
export default MyComponent;这种方法是首选，因为它精确地控制了我们获取坐标的元素，并且不会影响子元素的正常交互。
解决方案二：使用 CSS 属性 pointer-events: none (替代方案，需谨慎使用)
另一种更简洁但通常不推荐的方法是，通过CSS将子元素的pointer-events属性设置为none。这会使子元素不再响应任何鼠标事件（包括点击、悬停等），从而让鼠标事件“穿透”到其下方的父元素。
实现方式：
/* 在你的 CSS 文件或 style 标签中 */
.child-element {
pointer-events: none;
}或者直接在行内样式中设置：
@@##@@
注意事项：
- 功能限制： 设置pointer-events: none意味着该子元素将不再能被点击、拖拽或触发任何其他鼠标事件。如果你的子元素需要响应这些事件，此方法将不适用。
- 不推荐作为通用解决方案： 这种方法改变了元素的交互行为，可能导致意外的副作用或用户体验问题。它通常只在特定且明确不需要子元素响应鼠标事件的场景下考虑。
- 无法获取子元素内部的相对坐标： 这种方法只能确保onMouseEnter事件由父元素接收，但如果你需要获取鼠标相对于子元素内部的坐标，它就无能为力了。
总结
当在React中处理onMouseEnter事件并需要获取父元素的精确坐标时，使用useRef钩子是最佳实践。它提供了对DOM元素的直接引用，允许我们精确地控制获取坐标的来源，同时不干扰子元素的正常交互。pointer-events: none作为一种CSS替代方案，虽然实现简单，但由于其会禁用子元素的鼠标事件，因此应谨慎使用，并仅限于子元素确实不需要任何鼠标交互的场景。理解event.target与ref.current的区别，是编写健壮的React交互逻辑的关键。
