React中onMouseEnter事件如何获取父元素而非子元素的Y轴位置

原问题代码 #

const handleonHover=()=>{ 
  // 获取div的Y轴位置  
  const rect = event.target.getBoundingClientRect(); 
  console.log("POS OF Y",rect.y) 
} 
<div onMouseEnter={()=>handleonHover()}>
  {/* 高400px、宽300px的父div */}
  <Image>
    {/* 高200px、宽100px的子元素Image */}
  </Image> 
</div>

问题核心：event.target指向的是实际触发事件的元素——鼠标悬停在子Image上时，target就是Image，所以获取的是它的Y轴位置，而非父div的。

三种解决方法 #

1. 用event.currentTarget（最直接）

currentTarget永远指向绑定事件的那个元素（也就是父div），不管事件是不是从子元素冒泡上来的。修改代码：

const handleonHover=(event)=>{ 
  const rect = event.currentTarget.getBoundingClientRect(); 
  console.log("POS OF Y",rect.y) 
} 
<div onMouseEnter={handleonHover}>
  {/* 高400px、宽300px的父div */}
  <Image>
    {/* 高200px、宽100px的子元素Image */}
  </Image> 
</div>

注意：别用()=>handleonHover()这种写法，会丢失event参数，直接传handleonHover即可，事件会自动把event传给它。

2. 给父div加Ref（React场景推荐）

如果是React项目，用useRef直接拿到父div的DOM节点，不用依赖事件对象：

import { useRef } from 'react';

const YourComponent = () => {
  const parentDivRef = useRef(null);

  const handleonHover=()=>{ 
    if (parentDivRef.current) {
      const rect = parentDivRef.current.getBoundingClientRect(); 
      console.log("POS OF Y", rect.y);
    }
  } 

  return (
    <div 
      ref={parentDivRef} 
      onMouseEnter={handleonHover}
      style={{ height: '400px', width: '300px' }}
    >
      <Image style={{ height: '200px', width: '100px' }} />
    </div>
  )
}

3. 从子元素向上查找父元素

如果必须用event.target，可以用closest()方法精准定位父div：

const handleonHover=(event)=>{ 
  // 给父div加个类名，避免匹配到其他div
  const parentDiv = event.target.closest('.parent-container');
  if (parentDiv) {
    const rect = parentDiv.getBoundingClientRect(); 
    console.log("POS OF Y", rect.y);
  }
} 
<div className="parent-container" onMouseEnter={handleonHover}>
  {/* 高400px、宽300px的父div */}
  <Image>
    {/* 高200px、宽100px的子元素Image */}
  </Image> 
</div>

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