方案一：禁用缩放
当HTML文档头部包含如下meta标签时：
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。
方案二：更改默认的视口宽度
一开始，为了让桌面站点能在移动端浏览器正常显示，移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度，而是要比设备浏览器视窗宽度大，通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。
<meta name="viewport" content="width=device-width">
因为双击缩放主要是用来改善桌面站点在移动端浏览体验的，而随着响应式设计的普及，很多站点都已经对移动端坐过适配和优化了，这个时候就不需要双击缩放了，如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。
方案三：CSS touch-action
网上很多文章把这个方案归结为指针事件，这令我很疑惑。
以我的理解来看，指针事件的提出并不是为了解决300ms点击延迟的，而是为了使用一个单独的事件模型，对鼠标、触摸、触控等多种输入类型进行统一的处理。也就是说，移动浏览器不用再为不同的输入设备设计不同的事件，网页的开发者也不用再为不同输入类型的设备写不同的事件响应代码，而是通过统一的指针事件就可以开发出跨不同输入类型终端的应用。
跟300ms点击延迟相关的，是touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。如果将该属性值设置为touch-action: none，那么表示在该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。
而设置这个CSS属性与否，指针事件应该都是可以工作的。所以，网上的文章令我很疑惑，希望有大神能给我指示~ 。。~
二、点击穿透问题
说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？
使用touchstart去代替click事件有两个不好的地方。
第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；
第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。
什么是点击穿透？
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。
这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。
作者：tsyeyuanfeng
链接：http://www.jianshu.com/p/6e2b68a93c88
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
方案一：引入fastclick
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>fastclick说明书</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
</head>
<body>
<button id="box">click me!</button>
<script type="text/javascript">
/*注释：两个入口可选其一,引用的js包必须放到标签上边*/
//入口1：原生入口
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function(){
FastClick.attach(document.body);
}, false);
}
//入口2：jquery入口（如果使用jquery的话，使用以下入口即可）
/*$(function() {
FastClick.attach(document.body);
});*/
//点击效果
document.querySelector("#box").addEventListener("click",function(){
alert("click me!");
},false)
</script>
</body>
</html>
