@touchend替代@click是最轻量可靠的解法,因iOS Safari为双击缩放强制300ms延迟,@touchend为原生即时事件,但必须配合.prevent阻断默认行为、.stop阻止冒泡,并确保点击区域≥44×44px。

@touchend 替代 @click 是最直接有效的解法,不需要引入 FastClick,也不依赖平台判断,但必须加 preventDefault() 和尺寸约束,否则在滚动容器里会误触或失效。
为什么 @click 在 iOS Safari 里一定有 300ms 延迟
iOS Safari 为支持双击缩放,必须等待 300ms 才能确认用户是单击还是双击——这不是 bug,是设计行为。uni-app 的 H5 端运行在 Safari 或 WKWebView 中,完全继承该机制。只要绑定的是 @click,就逃不开这个延迟。@tap 在 H5 下只是对 click 的封装,不解决根本问题。
@touchend 怎么写才真正生效
只改事件名不够,关键在防误触、阻断默认行为、确保 DOM 就绪:
- 模板中写
@touchend.stop.prevent="handleClick":.stop阻断冒泡,.prevent调用event.preventDefault(),防止触发后续click和页面滚动 - 方法内加滑动判断:
if (this.isDragging) return(需配合@touchstart记录起始坐标) - 确保点击区域 ≥ 44×44px,iOS 对小目标有额外触摸容错限制,太小会触发系统级防误触逻辑
- 避免在
@touchend里调this.$nextTick或异步请求,视图更新滞后会导致响应“卡半拍”
哪些场景下 @touchend 会静默失败
不是所有 @touchend 都能立刻聚焦或跳转,尤其在动态渲染或复杂布局中:
-
v-if切换后立即focus():DOM 可能还没挂载,先判document.contains(this.$refs.input) - 父容器用了
transform: translateZ(0)或will-change: transform:iOS 会把子元素提升到独立合成层,坐标系错乱导致触摸点偏移——必须移除这些 CSS - 弹窗内表单自动聚焦:不能在
mounted或onReady里直接focus(),要等用户真实触摸一次后才允许触发,否则 WKWebView 静默忽略 -
textarea聚焦前未重设高度:先设style.height = 'auto'再读scrollHeight,否则光标可能跳到首行
最麻烦的不是事件绑定那一行代码,而是 iOS 不同版本对 position: fixed、overflow、transform 的合成策略差异——真机调试时表现不一致,往往要逐项关闭干扰样式才能定位根因。


















