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助手,依托大模型,帮助用户记录、整理和分析音视频内容,体验用大模型做音视频笔记、整理会议记录。

相关推荐
吳所畏惧5 分钟前
宝塔面板Redis密码修改指南:SSH命令修改 vs 面板UI界面修改,哪个更靠谱?
运维·服务器·数据库·redis·缓存·ssh
DFT计算杂谈8 分钟前
无 Root 权限在 Tesla K80 零门槛部署 DeepSeek 大模型
linux·服务器·网络·数据库·机器学习
qetfw15 分钟前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
HPFBoy16 分钟前
log4net 数据库存日志正确配置
数据库
liuxiaowei343 分钟前
【绝版教程】新版MySQL DBA高级实战进阶班 MySQL8.0 姜承尧-腾讯数据库总监
数据库·mysql·dba
用户8356290780511 小时前
Python 实现 Excel 页面布局与打印设置自动化
后端·python
破碎的南瓜1 小时前
sqli--sql注入过关笔记(1,2,3,4,5,9)
数据库·笔记·sql
一次旅行1 小时前
Python+大模型端到端自动化日报系统
开发语言·python·自动化
_Jimmy_1 小时前
AI应用开发工程师面试题库
人工智能·python·深度学习·机器学习·知识图谱
用户8356290780512 小时前
Python 实现 Excel 命名范围(Named Range)的创建与管理
后端·python