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

根本原因是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 浏览器对 <select> 原生控件的 click 事件响应极不稳定------尤其当它被封装在 .layui-form-select 这类绝对定位浮层里时,点击区域常被判定为"穿透"或"未命中"。真实表现是:点一下没反应,点两下才弹出,或者只在边框上能触发。直接改 Layui 源码最稳的补丁位置别动 HTML 结构或反复调 form.render(),问题在事件监听时机。Layui 1.1.2+ 的 layui.js 中,搜索关键词 select.on('click', '.layui-form-select',找到对应事件绑定块,把 click 换成 touchstart(iOS 安卓都认),并加个 preventDefault 防止误触发页面滚动:定位到 layui.js 约第 6800 行(版本不同略有偏移),找 select.on('click', '.layui-form-select'改成 select.on('touchstart', '.layui-form-select'在回调函数第一行加 e.preventDefault()保留原有 click 绑定不变,让 PC 端照常工作(即双事件共存)改完记得清缓存,否则白改。不改源码的兼容方案:用原生 select + CSS 覆盖如果不能动 layui.js(比如用 CDN 或受控环境),就绕过 Layui 的渲染逻辑,手动控制: 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手,依托大模型,帮助用户记录、整理和分析音视频内容,体验用大模型做音视频笔记、整理会议记录。

相关推荐
默_笙4 天前
🍙 给每个请求过安检:FastAPI 是怎么把校验写进类型注解的
python
qq_426003964 天前
启动playwright录制codegen生成自动化测试脚本
python·自动化
虎头金猫4 天前
4K 视频总卡在公网带宽?用 N1 + OpenList 把网盘播放链路重新理顺
运维·服务器·网络·python·容器·beautifulsoup·pandas
长沙三为智能科技4 天前
家政小程序开发从0到上线:五阶段交付流程与验收清单
python
此时不提桶,更待何时4 天前
01-06-A-JVM排查实战详解
java·jvm
伞伞悦读4 天前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
这个DBA有点耶4 天前
MVCC深入:Read View、版本链与快照读——InnoDB并发控制的内核
数据库·mysql·架构
DBA_G4 天前
从地面到云霄:GBase数据库在民航三大场景的落地实践
数据库
自由能燃气设备4 天前
商用全预混低氮冷凝锅炉免费方案vs付费方案对比+选型避坑指南
大数据·数据库·人工智能
只睡四小时4 天前
Canvas 弹道联机实战:700 行 + 固定时间步长
python·websocket·html5·游戏开发·canvas