click在移动端会有300ms延迟！

在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后，页面并不会立即做出相应的反应，而是要等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大感觉，但随着时代的发展，用户对移动端交互体验的要求越来越高，如今，移动端的延迟严重影响了用户体验。

300ms延迟的由来

07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOSSafari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhoneSafari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。

解决方案

方案一 使用fastclick插件解决问题

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

使用方法

安装fastclick可以使用npm，Component和Bower。另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package。最直接的可以在页面引入fastclick js文件。

插件下载完毕后，可以在页面中直接引入fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

js实例

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

方法二 禁用缩放

此方法有个缺点，完全禁用了双击缩放的功能，当我们需要放大文字或者图片时无法满足我们的需求。 在html文件的头部加入如下语句：

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

user-scalable=no表明这个页面不可缩放，浏览器禁用双击缩放事件同时达到去掉300ms点击延迟的效果

方案三 封装一个处理函数

//封装tap解决click 300ms 延时
function tap (obj,callback) {
	var isMove = false;//记录手指是否移动
	var startTime = 0;//记录手指触摸的时间
	obj.addEventListener('touchstart',function(e){
		startTime = Date.now();//记录触摸时间
	})
	obj.addEventListener('touchmove',function(e){
		isMove = true;//查看手指是否滑动
	})
	obj.addEventListener('touchend',function(e){
		if(!isMove && (Date.now()-statrTime) < 150){
		callback && callback();
		}
		isMove = false;//取反 重置
		startTime = 0;
	})
};
tap(div,function(){ //执行代码 }）；

这个代码可以监测元素点击发生时的状态，从而避免300ms的延迟。
但这个方法也有一个弊端，一次只能给一个元素解决问题，复杂情况下要使用其他方法额外进行处理。