鼠标移动过快导致onMouseLeave、onMouseOut无法触发

react项目里上传文件产品有个骚操作，要hover到元素上才展示上传按钮。但是会出现一个问题，如果鼠标快速掠过元素，导致元素一直在hover状态，除非鼠标再次移入移除元素

怎么解决这个问题呢？这里就放关键代码，记录一下吧

  const uploadRef = useRef(null);
  const [isHover, setIsHover] = useState(false);
  
  const handleMouseMove = (e) => {
    const rect = uploadRef.current?.getBoundingClientRect();
    // 判断鼠标是否在元素内
    const isInside = 
      e.clientX >= rect.left &&
      e.clientX <= rect.right &&
      e.clientY >= rect.top &&
      e.clientY <= rect.bottom;
    
    if (!isInside) {
      setIsHover(false);
      // 执行离开逻辑
    } else {
      setIsHover(true);
    }
  };
  
  // 给浏览器视口添加鼠标移动事件，主要解决过快hover状态一直存在
  useEffect(()=>{
    window.addEventListener('mousemove', handleMouseMove);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    }
  }, [])


  <div ref={uploadRef} onMouseOver={handleMouseMove} onMouseOut={() => setIsHover(false)></div>
	

这样就能解决了， 只要鼠标有移动都会监听到鼠标是在元素内