ios 点击事件300ms延迟

移动端300ms点击延迟

• 第一篇文章。
• 万恶罪魁
• 解决方法

• 方案一：禁用缩放
• 方案二：更改默认的可视宽度
• 方案三：CSS touch-action
• 方案四： [FastClick](https://github.com/ftlabs/fastclick)

• Vue的解决方法

第一篇文章。

最近写一个移动端的小商城，看了移动端300ms点击延迟这个问题许多解释总结一下。

万恶罪魁

2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
删除线格式 当中的双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。
总结：就是使用300ms的延迟来判定用户是否双击。

解决方法

方案一：禁用缩放

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

表明这个页面是不可缩放的，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点：这样会完全禁用缩放功能。

方案二：更改默认的可视宽度

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

设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

方案三：CSS touch-action

touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。如果将该属性值设置为touch-action: none，那么表示在该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。

方案四： FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

Vue的解决方法

fastclick插件

npm  install --save fastclick

然后在main.js中

import fastclick from 'fastclick'
fastclick.attach(document.body)

就好了，感谢大佬们的分享。（接着爬坑去了）