如何解决click在移动端ios上有300ms的延迟

如何解决click在移动端ios上有300ms的延迟

原因

2007年苹果发布首款Iphone上ios搭载的safari，为了能把PC端大屏幕的页面以较好的效果展示在小屏幕手机端上，采用了双击缩放（double tap to zoom）的方案。而这就是click在移动端ios会有300ms的缘由。

因为，浏览器怎么区分用户是只要单击操作还是要双击进行缩放操作。所以设置了300ms的延迟时间，加以判断用户是单击还是双击缩放。

浏览器会在捕获用户第一次单击时，保持300ms的时间：若在300ms内若捕获不到第二次单击，则用户就是单纯执行单击操作；若在300ms内，用户有第二次单击操作，则对该区域进行缩放操作。

若用户只是单纯要执行单机操作，如点开某个链接，却要等待300ms的时间（判断是否要双击缩放）。故给用户有了“慢”的体验。

方法一、粗暴型：禁用缩放

既然双击缩放是造成300ms延迟的原因，那么只要禁用缩放就可以了。禁用缩放，也就没有了双击产生缩放的操作，那么就不需要等待300ms，也就没有了300ms的延迟。

<meta name="viewport" content="width=device-width,user-scalable=no">

方法二、FastClick

原理：在检测到touched事件后，立即触发一个模拟click事件，并把浏览器300ms之后真正触发的click事件阻断掉。

使用：

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

移动端类库 jQuery和zepto.js都支持tap事件来解决这个问题