原生select无法点击外部关闭，因其下拉菜单由浏览器系统渲染、dom不暴露且不可绑定事件；layui仅做样式增强，未重写弹出逻辑，故监听document点击无法捕获菜单区域，blur/focusout事件在各浏览器中行为不一致，而dropdown模块通过自定义dom天然支持外部点击关闭。
layui 的原生 select 下拉框不支持点击外部自动关闭，必须放弃原生控件，改用 dropdown 模块或手动监听 document 点击事件。
为什么原生 select 无法点击外部关闭
原生 <select></select> 是浏览器强管控的表单控件，其下拉菜单由系统渲染，DOM 不暴露、不可绑定事件、也无法用 CSS 定位或劫持。Layui 只是用 form.render() 对它做样式增强，没重写弹出逻辑——所以你监听 document 点击，永远捕获不到菜单区域的 click，更没法判断是否点在外部。
-
change事件只在值真正改变后触发，不是“点击即响应” - 试图给
select绑blur或focusout，在 Chrome/Firefox 中行为不一致，Safari 下基本无效 - 设
disabled后整个控件失活；readonly对select无意义
用 dropdown 模块实现可关闭的下拉菜单
这是最干净、可控的方式。Layui 的 dropdown 是完全自定义 DOM 的弹层，天然支持点击外部关闭（默认行为），且能自由控制触发时机和内容。
- 必须显式引入：
layui.use(['dropdown'], function(){...}) -
trigger: 'click'确保点击按钮才展开，避免 hover 误触 - 菜单项点击后默认自动收起；如需阻止（比如点完要继续操作），在
click回调里不调obj.close() - 若需定位到某个元素右侧/下方，用
align: 'right'或offset: '0,10'
layui.use(['dropdown'], function(){
layui.dropdown.render({
elem: '#myTriggerBtn',
data: [
{title: '导出 Excel', id: 'export'},
{title: '打印预览', id: 'print'}
],
trigger: 'click',
align: 'right',
click: function(obj){
if(obj.id === 'export') doExport();
if(obj.id === 'print') window.print();
// 不写 obj.close() → 菜单保持打开
}
});
});
手动监听 document 实现“伪 select”点击关闭
如果你必须保留 <select></select> 标签结构（比如后端模板强约束），只能用 JS 模拟：隐藏原生 select，用 layer.open() 或绝对定位 div 模拟下拉菜单，再靠 document 监听 + contains() 判断点击位置。
- 监听必须用
document.addEventListener('click', ...)，不能用body—— body 高度不足时底部空白点不中 - 每次展开菜单前，先
clearTimeout并removeEventListener，否则多次点击会叠加监听 - 关键判断写法：
!menuContainer.contains(e.target) && e.target !== triggerBtn - 移动端要注意
touchstart替代click，防止 300ms 延迟导致关闭滞后
容易被忽略的 z-index 和 pointer-events 问题
即使逻辑写对，菜单也可能“点不关”——不是代码错了，而是被盖住了。
-
.layui-dropdown默认z-index: 19891015，但若页面有modal、loading层或全局fixed导航栏，它们的z-index可能更高，导致菜单不可见或点击穿透 - 父容器设置了
pointer-events: none，或者body有overflow: hidden，都会让菜单区域失去响应 - 用浏览器开发者工具检查
.layui-dropdown元素的computed样式，重点看z-index、visibility、pointer-events
真正卡住人的，往往不是怎么写，而是 DOM 渲染层级没理清——菜单明明存在，却像不存在一样点不着。
