本文详解如何为基于 jquery 构建的自定义图片下拉选择器（如 codepen 示例）添加“点击外部区域关闭菜单”功能，通过全局事件监听与事件冒泡控制，解决仅能通过选项点击关闭的交互缺陷。
在构建高度定制化的下拉选择组件（如带图标/缩略图的 替代方案）时，一个常见且关键的用户体验问题是：菜单无法像原生 那样在点击页面任意空白处时自动收起。这不仅违背用户直觉，还可能导致界面状态混乱。根本原因在于，自定义下拉通常由 div + ul/li 实现，脱离了原生表单控件的事件机制，需手动补全交互逻辑。
✅ 正确实现原理：全局监听 + 事件阻断
核心思路分两步：
- 注册全局点击监听器：监听 document 上的任意点击，触发下拉容器（.b）收起；
- 阻止事件冒泡干扰：在下拉按钮（.btn-select）和选项列表（#a li）的点击处理中使用 return false（等价于 e.preventDefault(); e.stopPropagation();），防止点击操作被全局监听器误捕获并立即关闭。
以下是精简、可复用的关键代码段：
