移动端H5点击事件在iOS Safari有延迟，怎么解决？

UP主～雯清提问于 2026-02-06 19:15:32 阅读 30

移动

我在开发移动端H5页面时，发现iOS Safari上按钮点击总延迟半秒，安卓没问题。试过加user-select: none和用touchend事件，但滑动页面后点击还是卡顿，控制台也没报错，该怎么排查？

尝试在CSS里写了：

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
}

JS用的是：

document.body.addEventListener('touchend', (e) => {
  if (e.target.classList.contains('btn')) {
    // 执行操作
  }
}, { passive: true })

iOS 16以上版本问题明显，测试发现是浏览器对手势的防误触机制导致，但具体怎么绕过这个延迟呢？

我来解答赞 7 收藏

反馈

1 条解答

司空恩硕 Lv1

这个问题在iOS Safari上确实比较常见，本质上是浏览器为了判断用户是不是双击缩放页面搞了个300ms的点击延迟。你加的那些CSS属性虽然能优化一部分体验，但解决不了根本问题。

想绕过这个延迟，比较靠谱的方案是引入一个叫fastclick的库。这东西原理就是在touchend阶段主动触发click事件，把浏览器默认的点击行为干掉。用法很简单，初始化一下就行：

if ('addEventListener' in document) {

  document.addEventListener('DOMContentLoaded', function() {

    FastClick.attach(document.body);

  }, false);

}

如果你不想引入额外的库，也可以手动在touchend里用js触发click：

document.body.addEventListener('touchend', function(e) {

  if (e.target.classList.contains('btn')) {

    e.preventDefault(); // 阻止默认行为

    // 执行你的操作

  }

});

不过要注意，像input、select这些原生控件可能会有副作用。另外在touchend里做逻辑判断时，还要注意防止穿透事件，比如手指还没离开屏幕就触发了其他操作。

还有个取巧的办法是给按钮加个cursor: pointer样式，某些iOS版本会识别这个属性自动降低延迟。但这个不保证100%有效，兼容性没fastclick靠谱。

总的来说这个问题不是单靠CSS能彻底解决的，得在事件层面做拦截。fastclick虽然有点老了，但应对这种兼容问题还是挺稳的。要是你项目里已经用上了像Vue、React这些框架，有些组件库（比如vant、mint-ui）内部其实都处理过这个逻辑，也可以直接用它们封装好的组件。

2026-02-06 20:04