Question

平时的开发中，事件触发大部分都是立刻响应，但是在 IOS 中，移动端的触摸事件会有 300ms 的延迟。

IOS 浏览器有一个特点，可以通过双击来对屏幕页面进行缩放，这是导致 300ms 延迟的核心原因。

因为当一个用户点击链接后，浏览器没办法判定用户是想双击缩放，还是进行点击事件触发，所以 IOS Safari 会统一等待 300ms，来判断用户是否会再次点击屏幕。

Meta 禁用缩放（推荐)

300ms 延迟的初衷是为了解决点击和缩放没办法区分的问题，针对不需要缩放的页面，通过禁用缩放来解决。

事实上，大部分移动端页面都是可以避免缩放的，通过交互等样式的兼容即可。

pages/_app.tsx

// ./pages/_app.tsx
// head 加这两行即可
// ...
< meta name="viewport" content="user-scalable=no" >
< meta name="viewport" content="initial-scale=1,maximum-scale=1" >

更改视口尺寸

Chrome 浏览器对包含 width=device-width 或者比 viewport 更小的页面禁用双击缩放，只需要加上下面的 meta 头，就可以在 IOS 中的 chrome 浏览器解决 300ms delay 的问题。

这个方案的好处是，并不会完全禁用缩放。但是 IOS 默认的 Safari 浏览器没有支持这个能力，所以可以加上这个 meta 头来兼容视口尺寸，但并不作为这个的解决方案。

<meta name="viewport" content="width=device-width">

Touch-action

在 W3C 草案中，有提出一个 touch-action css 属性，通过设置 touch-action: none 可以移除目标元素的 300ms delay，如果这个日后可以被主流浏览器支持，更推荐用这种方式针对区域进行灵活的限制。

fastclick

这是一个老牌的解决 300ms 延迟的轻量 JS 库，可以通过 npm 安装且使用方式简单。

window.addEventListener('load', () => {
    FastClick.attach(document.body);
  }, false);

不建议使用 fastclick 的方式解决这个问题，有几个原因：

• 对 TS 兼容性太差，fastclick 基于 JS，虽然有 ts for fastclick 的依赖，但是不被原作者认可，并且类型定义存在问题，直接引入依赖存在问题，需要自行进入模块定义中修改。
• 包体过大，且包八年没再维护。
• 不能直接用于 SSR，里面有直接用到 BOM，在服务器端渲染的时候会有相关报错，没找到比较好的插件可以兼容这个问题。