Layui如何解决表单select下拉框在移动端点击没反应

林译川

2026-09-11 • 👁 0人浏览过

根本原因是Layui 1.x用click事件绑定select下拉，而移动端对绝对定位浮层内select的click响应不稳定；应将layui.js中select.on('click','.layui-form-select')改为touchstart并加e.preventDefault()，同时保留click以兼容PC端。为什么 Layui 的

select

在 iOS/Android 上点不动根本原因不是“不支持移动端”，而是 layui 1.x 默认用

click

事件绑定下拉展开逻辑，而移动端 safari 和部分 android 浏览器对

，不加

lay-filter

，也不调

form.render()

用 CSS 强制还原 Layui 样式：

.layui-form-select dl dd{padding:0 15px;}

、

.layui-form-select .layui-edge{border-top-color:#5FB878;}

通过

change

事件监听值变化，而不是依赖 Layui 的

form.on('select(...)')

注意：安卓微信内置浏览器对

touchstart

有延迟，可加

cursor: pointer

到

select

上触发快速点击模式移动端真机调试时容易漏掉的三个细节

meta viewport

缩放必须关死：

，否则 iOS 双击缩放会打断

touchstart

流程 Layui 的

select

浮层

z-index

在某些 UI 框架（如 uni-app、Taro）里会被压住，检查 computed style，必要时手动提

z-index: 999999

真机测试别只信 Chrome DevTools 的“设备模拟”，iOS 必须用 Safari Web Inspector 连真机看事件是否真正触发，Android 用 Chrome

chrome://inspect

改完不测真机，等于没改。

相关文章