应调用event.stopPropagation()阻止菜单内部元素点击事件冒泡，避免触发document的关闭监听器；关闭逻辑需监听document点击并用menu.contains()判断是否点在菜单外。
在下拉菜单中点击内部选项时，如果不阻止事件冒泡，点击事件会一路向上触发到文档或 body 上的关闭监听器，导致菜单刚点开就立刻关闭。关键是在菜单内部元素的点击事件里调用 event.stopPropagation()，切断事件向上传播的路径。
给下拉菜单内部元素绑定点击并阻止冒泡
菜单项（如 、 或按钮）的点击事件需显式阻止冒泡，否则事件会到达外层容器甚至 document：
- 直接在菜单项上添加
onclick="event.stopPropagation()"（适合简单场景） - 更推荐用 JS 绑定事件，在回调中第一行写
event.stopPropagation() - 注意：只对菜单**内部可交互元素**做此处理，不要加在菜单根容器上，否则整个菜单无法响应打开/关闭逻辑
确保关闭逻辑监听的是 document 点击而非父容器
常见错误是把关闭监听器挂在菜单父级 div 上，结果一点击菜单自己就关了。正确做法是监听 document 或 body 的点击，再判断是否点在菜单外部：
- 用
event.target检查点击位置是否在菜单及其子元素之外 - 配合
menuElement.contains(event.target)判断是否点在菜单内 - 只有当点击不在菜单内时才执行关闭，这样菜单内所有操作（包括子菜单、输入框、按钮）都天然安全
避免 stopPropagation 和关闭逻辑冲突的细节
有时即使加了 stopPropagation，菜单还是意外关闭，可能因为：
- 多个事件监听器叠加，比如同时绑了
click和mousedown，而stopPropagation只影响当前事件类型 - 使用了
event.stopImmediatePropagation()更彻底，但要确认没其他同类型监听器需要执行 - 菜单使用了
focusout或blur触发关闭，这类事件不冒泡，stopPropagation无效，需改用focusin检测焦点是否留在菜单内
一个轻量可靠的示例结构
HTML 中菜单有唯一 class，JS 中统一处理：
const menu = document.querySelector('.dropdown-menu');
document.addEventListener('click', (e) => {
if (!menu.contains(e.target)) {
menu.classList.remove('open');
}
});
menu.querySelectorAll('a, button, input').forEach(el => {
el.addEventListener('click', e => e.stopPropagation());
});
这样既保证菜单内所有可点击控件不触发关闭，又让外部点击干净地收起菜单。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
