一、移动端click点击事件300ms延迟介绍
在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟。换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms才会触发click事件。在移动web兴起初期,用户对300ms的延迟没有太大的感觉,但随着用户对交互体验的要求的提高,如今,移动端的300ms延迟严重影响了用户体验。
300ms延迟由来
07年,苹果公司发布首款Iphone前夕,遇到一个问题:当时的网站都是为大屏设计,手机屏幕太小无法正常浏览,于是苹果工程师做了一些约定解决此类问题。
这些约定当中,最为有名的是双击缩放(double tap to zoom),这是产生300ms延迟的根源。
用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari
里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS
Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone
Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。
vue.js 安装fastclick插件解决问题
1.先执行安装fastclick的命令。
npm install fastclick -S
2.在main.js中引入

import FastClick from 'fastclick'
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}