1.产生的原因

在移动端触发时间会按照 touchstart，touchmove，touchend，click 顺序触发；触发touchend，click之间会有200-400不等的时间延时（因为移动端需要判断用户是不是想要进行双击）

2.解决方法

1.禁用缩放

缺点：就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们 只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们 还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

2.改变视口宽度

更改默认的视口宽度,这下除了safari浏览器还有300ms以外,其他的浏览器都已经没有延迟了.貌似是因为这个 方案还没有被safari通过.因为我们已经为用户适配了页面大小和阻止了用户缩放,所以浏览器就不用再判断用 户双击缩放了,于是便自动取消了click事件的300ms延迟

3. touch-action

html {
touch-action: none;
}
设置 touch-action 属性,该设置会禁用掉该元素上的浏览器代理的任何默认行为,包括缩放,移动,拖拽等.它把所有的触摸类型的交互事件都禁止掉了,导致页面也不能滚动.

4.引用fastclick库

原理：移动端，当用户点击屏幕时，会依次触发touchstart,touchmove(0次或多次)，touched,mousemove,mousedown,mouseup,click,touchmove。只有当手指在屏幕发生移动的时候才会触发touchmove事件。在touchstart,touchmove或者touched事件中的任意一个调用event.preventDefault,mouse事件以及click事件将不会触发。

fastClick在touchend阶段调用event.preventDefault,然后通过document.createEvent创建一个MouseEvents,然后通过eventTarget.dispatchEvent触发对应目标元素上绑定的click事件

  1. <script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script> 
  3. window.addEventListener( "load", function() {
  4.                 FastClick.attach( document.body );
  5.             }, false );