blur事件常失效因下拉菜单非可聚焦元素且点击外部时目标未获焦点；最可靠方案是用document.addeventlistener('click', ...)捕获全局点击并判断是否在dropdown区域外，同时注意组件卸载和收起时机问题。
点击下拉菜单外部时，blur 事件为什么经常失效？
因为 blur 只在元素失去焦点时触发，而下拉菜单通常用 div 或 ul 实现，本身不获取焦点；即使加了 tabindex，点击非可聚焦区域（比如菜单里的文字、空白处）也不会触发 blur。更关键的是：鼠标点击外部时，目标元素还没获得焦点，blur 根本没机会发生。
用 document.addEventListener('click', ...) 是最可靠方案
监听全局 click，再判断点击是否发生在按钮或下拉区域之外。注意必须用捕获阶段或手动排除目标路径，否则点开后立刻收起——因为按钮本身也是 document 的子元素。
- 给按钮和下拉容器都加一个统一的 class，比如
dropdown-trigger和dropdown-menu - 在事件回调里用
e.target.closest('.dropdown-trigger, .dropdown-menu')判断是否点击了相关区域 - 如果返回
null，说明点在外面，执行收起逻辑（比如移除showclass 或设display: none） - 别忘了在点击按钮时调用
e.stopPropagation()，防止它立刻触发外部收起
focusout + tabindex 组合只适合键盘操作场景
给下拉容器设 tabindex="-1"，监听它的 focusout，看似可行，但实际问题很多：鼠标点击菜单项不会触发 focusout；快速切换焦点可能误判；Safari 对 focusout 在非表单元素上的支持不稳定。
- 仅当你的下拉菜单明确要求键盘导航（如按 Tab 进入、Esc 关闭）时才考虑这个路径
- 必须配合
setTimeout延迟判断，因为focusout触发时，新焦点元素可能还没确定 - 永远要 fallback 到
click监听，不能只靠focusout
React/Vue 等框架里，别在组件卸载后还 setState 或触发更新
用 useEffect 或 onMounted/onUnmounted 绑定全局 click 事件时，容易忽略组件已销毁但事件还在执行的问题，导致警告或报错 Can't perform a React state update on an unmounted component。
- 在事件监听函数里加一层判断：用 ref 记录组件是否 still mounted
- 在清理函数中移除事件监听，而不是依赖框架自动卸载
- Vue 用户注意：
v-click-outside指令虽方便，但对嵌套弹出层（如下拉里再弹 tooltip）支持不好，建议手写逻辑
beforeunload 或导航前手动关闭，而不是等 click 事件自然结束。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
