React onMouseEnter 事件：获取父元素相对坐标的精确方法

import { useRef } from 'react';

function MyComponent() {
  // 1. 创建一个 ref
  const parentRef = useRef(null);

  // 2. 定义事件处理函数
  const handleMouseEnter = (e) => {
    // 3. 通过 ref.current 访问父元素 DOM 节点
    const parentRect = parentRef.current.getBoundingClientRect();

    // 4. 获取鼠标相对于视口的坐标
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    // 5. 计算鼠标相对于父元素左上角的坐标
    // parentRect.left 和 parentRect.top 是父元素左上角相对于视口的距离
    const relativeX = mouseX - parentRect.left;
    const relativeY = mouseY - parentRect.top;

    console.log(`鼠标相对于父元素的X坐标: ${relativeX}, Y坐标: ${relativeY}`);
    console.log(`父元素在视口中的Y坐标: ${parentRect.y}`); // 也可以直接获取父元素在视口中的Y坐标
  };

  return (
    // 6. 将 ref 绑定到父元素上
    <div
      ref={parentRef}
      onMouseEnter={handleMouseEnter}
      style={{ height: '400px', width: '300px', border: '1px solid blue', position: 'relative' }}
    >
      <p>鼠标进入此区域</p>
      <img
        src="https://via.placeholder.com/100x200" // 替换为你的图片路径
        alt="内部图片"
        style={{ height: '200px', width: '100px', display: 'block', margin: '20px auto' }}
      />
    </div>
  );
}

export default MyComponent;

/* 在你的CSS文件中或者使用行内样式 */
.child-element {
  pointer-events: none;
}

function MyComponent() {
  const handleMouseEnter = (e) => {
    // 此时 e.target 总是指向 div，因为 img 不再捕获事件
    const rect = e.target.getBoundingClientRect();
    console.log("父元素在视口中的Y坐标:", rect.y);
  };

  return (
    <div onMouseEnter={handleMouseEnter} style={{ height: '400px', width: '300px', border: '1px solid red' }}>
      <p>鼠标进入此区域</p>
      <img
        src="https://via.placeholder.com/100x200" // 替换为你的图片路径
        alt="内部图片"
        style={{ height: '200px', width: '100px', display: 'block', margin: '20px auto', pointerEvents: 'none' }}
      />
    </div>
  );
}

export default MyComponent;