React onMouseEnter 事件以获取元素的 X 和 Y 轴

Question

const handleonHover=()=>{
 //get to know the y axis position from the div 
 const rect = event.target.getBoundingClientRect();
 console.log("POS OF Y",rect.y)

}

<div onMouseEnter={()=>handleonHover()}>(height:400px,width:300px) 
<Image>
//image (height:200px,width:100px) 
</Image>
</div>

当鼠标进入 div 时得到 y 轴（Y 轴 - 400），但是当 将鼠标悬停在放置在 div 内的图像上，从 图像不同（Y 轴 - 430）。如何根据 div（父）位置不是图像（子）位置？

Answer 1

onMouseEnter 事件将返回您正在收听的元素内的实际悬停元素，或者如果那里没有其他内容，它将返回自己。如果你想绕过这个问题，你有一个使用 ref 函数的简短解决方案。

const ref = useRef(null)

  const onHover = (e) => {
    var rect = ref.current.getBoundingClientRect()
    var x = e.clientX - rect.left; 
    var y = e.clientY - rect.top;  
    console.log(x,y);
  }

    <div ref={ref} onMouseEnter={onHover}>
        <img src="{your image}" alt="" />
    </div>

或者，您可以简单地将 CSS 属性

"pointer-events: none;"

添加到父元素内的元素。 但它不如第一种解决方案安全。

记得先导入useRef

import { useRef } from 'react';