JavaScript mouseenter/mouseout实现hover效果时下拉内容异常问题

问题场景 #

使用JavaScript的mouseenter和mouseout事件实现按钮hover显示下拉内容，移出按钮时隐藏。但当下拉内容包含子元素（如<li>）时，鼠标移入下拉区域后内容会突然消失；下拉内容为空时功能正常。

问题原因 #

1. 重复绑定事件：每次按钮触发mouseenter时，都会重复给按钮和下拉菜单绑定mouseout事件，导致多次执行移除active类的操作，触发异常隐藏。
2. mouseout事件冒泡：mouseout会在鼠标离开元素或其子元素时触发，当鼠标从按钮移到下拉的<li>上时，按钮的mouseout会触发，同时<li>的mouseout会冒泡到下拉菜单，双重触发隐藏逻辑。
3. 布局空隙：下拉菜单和按钮没有处于同一个连续的交互区域，鼠标移动时可能触发不必要的离开事件。

修复方案 #

将按钮和下拉菜单放入同一个父容器，监听父容器的mouseenter和mouseleave事件（mouseleave不会冒泡，仅在鼠标完全离开容器时触发），统一控制下拉菜单的显示与隐藏。

修正后的代码 #

HTML

<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div class="dropdown-container">
        <button>Hover Me</button>
        <div class="dropdown">
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
        </div>
    </div>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    place-items: center;
    height: 100vh;
    font-family: sans-serif;
}

.dropdown-container {
    position: relative; /* 作为下拉菜单的定位父级 */
}

button {
    padding: 1em;
    cursor: pointer;
}

.dropdown {
    position: absolute;
    top: 100%; /* 相对于容器底部定位，紧贴按钮 */
    left: 0;
    width: 100px;
    height: 200px;
    background-color: red;
    display: none;
}

.dropdown.active {
    display: block;
}

JavaScript

const container = document.querySelector(".dropdown-container");
const dropdown = document.querySelector(".dropdown");

// 仅绑定一次事件，避免重复触发
container.addEventListener("mouseenter", () => {
    dropdown.classList.add("active");
});

container.addEventListener("mouseleave", () => {
    dropdown.classList.remove("active");
});

关键改进点 #

• 统一容器监听：通过父容器管理按钮和下拉的交互，确保鼠标在两者之间移动时不会触发离开事件。
• 使用mouseleave：替代mouseout，避免子元素触发不必要的隐藏操作。
• 合理布局定位：下拉菜单相对于父容器定位，消除布局空隙，保证交互连续性。

内容的提问来源于stack exchange，提问作者Si mo Id