React onMouseEnter 事件中获取父元素精确坐标的策略

const handleonHover = (event) => {
  // 当鼠标悬停在子元素Image上时，event.target会是Image，导致获取的是Image的坐标
  const rect = event.target.getBoundingClientRect();
  console.log("当前悬停元素的Y轴位置:", rect.y);
};

<div onMouseEnter={handleonHover} style={{ height: '400px', width: '300px' }}>
  <img src="your-image.jpg" alt="示例图片" style={{ height: '200px', width: '100px' }} />
</div>

import React, { useRef } from 'react';

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

  const handleMouseEnter = (e) => {
    // 4. 通过parentRef.current访问父DOM元素
    if (parentRef.current) {
      const rect = parentRef.current.getBoundingClientRect();

      // e.clientX 和 e.clientY 是鼠标相对于视口（viewport）的坐标
      // rect.left 和 rect.top 是父元素相对于视口的左上角坐标
      // 通过相减，可以得到鼠标相对于父元素左上角的内部坐标
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      console.log("鼠标相对于父元素的X坐标:", x);
      console.log("鼠标相对于父元素的Y坐标:", y);
      console.log("父元素自身的Y轴位置:", rect.y); // 也可以直接获取父元素自身的Y轴位置
    }
  };

  return (
    <div
      ref={parentRef} // 3. 将ref绑定到父元素
      onMouseEnter={handleMouseEnter}
      style={{
        height: '400px',
        width: '300px',
        border: '1px solid blue',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative' // 确保getBoundingClientRect的top/left是相对于其定位上下文
      }}
    >
      <img
        src="https://via.placeholder.com/150" // 示例图片
        alt="内部图片"
        style={{
          height: '200px',
          width: '100px',
          border: '1px solid red'
        }}
      />
      <p style={{ position: 'absolute', bottom: '10px' }}>悬停在我身上试试</p>
    </div>
  );
}

export default MyComponent;

function MyComponentWithCss() {
  const handleMouseEnter = (e) => {
    // 此时event.target将始终是父div，因为子元素不响应鼠标事件
    const rect = e.target.getBoundingClientRect();
    console.log("父元素Y轴位置 (通过CSS穿透):", rect.y);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      style={{
        height: '400px',
        width: '300px',
        border: '1px solid green',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <img
        src="https://via.placeholder.com/150"
        alt="内部图片"
        style={{
          height: '200px',
          width: '100px',
          border: '1px solid purple',
          pointerEvents: 'none' // 关键CSS属性
        }}
      />
    </div>
  );
}

export default MyComponentWithCss;