解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题 - 十七度

在父元素上同时使用 onMouseEnter和 onMouseLeave来控制下拉菜单的展开与收起是常见的做法，但有时可能会遇到一些问题，比如鼠标在父元素和子元素之间移动时，由于事件触发顺序或元素边界问题导致下拉菜单无法正常展开或者提前收起。

问题通常发生在：

鼠标从父元素移动到子元素的过程中，会先触发父元素的 mouseleave事件，然后再触发子元素的 mouseenter事件。如果这两个元素之间有空隙，那么鼠标在空隙中时，父元素已经触发了 mouseleave，导致下拉菜单收起，而子元素还没来得及触发 mouseenter，这样就会出现闪烁或者菜单无法展开的情况。
另外，如果子菜单是绝对定位，可能和父元素有重叠，但鼠标移动速度过快时，也可能错过子菜单。

优化方法：

使用延迟触发：在 mouseleave事件中设置一个延迟关闭的定时器，在 mouseenter事件中清除这个定时器。这样，如果鼠标只是短暂离开父元素（比如进入了子菜单），那么在下拉菜单收起前，如果鼠标进入了子菜单，就可以取消关闭操作。

import React, { useState, useRef } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const timerRef = useRef(null);

  const handleMouseEnter = () => {
    clearTimeout(timerRef.current);  // 清除关闭延迟
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    timerRef.current = setTimeout(() => {
      setIsOpen(false);
    }, 200);  // 200ms关闭延迟
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="parent"
    >
      主菜单

      {isOpen && (
        <div
          className="dropdown"
          onMouseEnter={() => clearTimeout(timerRef.current)}
          onMouseLeave={handleMouseLeave}
        >
          子菜单项1
          子菜单项2
        </div>
      )}
    </div>
  );
}

关键优化点说明：

延迟关闭机制（200ms原则）
- 在鼠标离开父元素时设置200ms延时关闭
- 如果在此期间鼠标进入子菜单，则取消关闭操作
- 使用useRef保存定时器，避免闭包问题
子菜单事件关联
- 子菜单添加onMouseEnter清除关闭定时器
- 子菜单复用父元素的handleMouseLeave逻辑
- 确保父子菜单形成统一交互区域

实现在点击菜单外部时关闭下拉菜单

import React, { useState, useEffect, useRef } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const timerRef = useRef(null);
  const dropdownRef = useRef(null); // 用于引用菜单容器

  // 处理悬浮事件
  const handleMouseEnter = () => {
    clearTimeout(timerRef.current);
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    timerRef.current = setTimeout(() => {
      setIsOpen(false);
    }, 200);
  };

  // 添加全局点击事件监听器
  useEffect(() => {
    const handleClickOutside = (event) => {
      // 如果菜单已打开且点击的不是菜单内的元素
      if (isOpen && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]); // 依赖项确保在打开/关闭状态变化时更新监听逻辑

  return (
    <div 
      ref={dropdownRef} 
      className="parent"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      主菜单

      {isOpen && (
        <div
          className="dropdown"
          onMouseEnter={() => clearTimeout(timerRef.current)}
          onMouseLeave={handleMouseLeave}
          // 点击菜单选项时不关闭菜单
          onClick={(e) => e.stopPropagation()} 
        >
          <div className="dropdown-item">选项 1</div>
          <div className="dropdown-item">选项 2</div>
          <div className="dropdown-item">选项 3</div>
        </div>
      )}
    </div>
  );
}

实现点击外部关闭的关键要点：

使用引用捕获菜单元素


const dropdownRef = useRef(null);
// ...
<div ref={dropdownRef}>

全局点击事件监听器


useEffect(() => {
  const handleClickOutside = (event) => {
    if (isOpen && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);

  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, [isOpen]);

防止菜单内部点击冒泡


<div onClick={(e) => e.stopPropagation()}>

本文转自 https://juejin.cn/post/7547989975469113354，如有侵权，请联系删除。