关闭下拉弹窗需监听 document 的捕获阶段点击事件，判断点击目标既不位于弹窗内也不在触发按钮及其子元素上，否则隐藏弹窗；动态场景需更新节点引用，多实例应独立管理。
点击空白处关闭下拉弹窗，核心是监听全局点击事件，判断点击目标是否在弹窗及其触发元素之外。关键不在“点哪里”，而在“点的不是谁”。
监听 document 点击并排除弹窗和触发按钮
给 document 绑定一次点击事件，在回调中检查 event.target 是否既不包含在弹窗 DOM 节点内，也不等于触发下拉的按钮（或其它触发元素）。
- 用
element.contains(event.target)判断点击是否落在弹窗内部 - 用
event.target === triggerEl或triggerEl.contains(event.target)判断是否点在触发按钮上 - 两者都不满足，就隐藏弹窗
注意事件捕获阶段更可靠
推荐使用捕获模式（第三个参数设为 true），避免弹窗内部元素阻止冒泡导致判断失效：
document.addEventListener('click', handleClick, true);
这样即使弹窗里某个子元素调用了 event.stopPropagation()，也能在捕获阶段拿到原始点击目标。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
别忘了动态更新和清理
如果弹窗是动态创建或切换的，每次显示前要确保绑定事件（或只绑一次，但更新内部引用）；隐藏时不需要手动解绑，除非你明确要销毁整个功能。另外，多个下拉共存时，每个应独立管理自己的触发器和弹窗节点，避免互相干扰。
简单示例结构
假设触发按钮 id 是 dropdown-btn，弹窗容器 class 是 dropdown-menu：
const trigger = document.getElementById('dropdown-btn');
const menu = document.querySelector('.dropdown-menu');
function handleClick(e) {
const inTrigger = trigger.contains(e.target) || e.target === trigger;
const inMenu = menu.contains(e.target);
if (!inTrigger && !inMenu) {
menu.style.display = 'none';
}
}
document.addEventListener('click', handleClick, true);
