iOS点击延迟本质是300ms双击缩放兼容机制,非bug;uni-app中推荐用@touchend替代@click,需配合preventDefault、防误触判断及确保元素尺寸≥44px×44px。

iOS 点击延迟本质是 300ms 默认行为
不是 bug,是 Safari 为双击缩放留的兼容机制。uni-app 在 iOS WebView 里跑,逃不开这个限制。用户点下去,要等 300ms 才触发 @click,尤其在按钮、列表项、自定义开关上特别明显——手指松开后界面“卡半拍”才响应。
- 只影响
@click,@touchstart和@touchend是即时触发的(但要注意事件冒泡和默认行为) -
@tap在 H5 环境下实际是模拟 click,不解决延迟;真机调试时它可能比@click更不可靠 - fastclick 库能拦截并立即派发 click,但需手动引入 + 配置
transpileDependencies,HBuilderX 项目容易漏掉这步
推荐方案:用 @touchend 替代 @click(最轻量)
不用装包、不改构建配置,改一行事件绑定就能见效。关键是别只绑 @touchend,得配合 preventDefault 和状态判断,否则在滚动容器里会误触或失效。
- 在目标元素上写:
@touchend="handleClick",同时确保父容器没加overflow: hidden或pointer-events: none - 方法里加防误触逻辑:
if (this.isDragging) return;(配合@touchstart记录起始位置判断是否滑动) - 避免在
@touchend里直接调this.$nextTick或复杂计算,否则视图更新仍会滞后
fastclick 配置容易漏掉的三个地方
很多人装了 fastclick 却没生效,问题不在库本身,而在 uni-app 的构建链路里被跳过了。
- manifest.json 中必须显式添加:
"transpileDependencies": ["fastclick"],否则 HBuilderX 不会编译它 - main.js 里要 import 并执行:
import FastClick from 'fastclick'; FastClick.attach(document.body); - 如果页面用了
scroll-view或自定义滚动容器,fastclick 默认不处理内部区域,得手动传入容器节点:FastClick.attach(this.$refs.scrollView)
真机调试时点击无反应?先查这三件事
延迟只是表象,有时候根本没触发,是因为 iOS 对可点击区域有隐性要求。
- 元素宽高是否为 0?iOS 要求可点击元素至少有
44px × 44px物理尺寸(CSS 像素),padding或min-height没设够就点不中 - 是否有
z-index被遮挡?比如 fixed 导航栏、蒙层、广告位,用 Safari 连真机调试器选中元素看渲染层级 - 是否在
scroll-view内且启用了enhanced属性?该属性在某些 iOS 版本下会劫持 touch 事件,导致@click失效

















