探讨一下解决移动端点击300ms延迟方案

听到前辈们说移动端尽量不要使用click，因为click会比较迟钝，能用touchstart还是用touchstart。但是用touchstart会有一个问题，用户在滑动页面的时候要是不小心碰到相关元素也会触发touchstart。

原因：移动端要判断是否是双击，所以单击之后不能够立刻出发click，要等300ms，直到确认不是双击了才触发click。所以就导致了click有延迟。

1. 设置viewport

   <meta name="viewport" content="initial-scale=1.0">
   

   把viewport设置成设备的实际像素，那么就不会有这300ms的延迟，并且这个举动受到了IE/Firefox/Safari（IOS9.3）的支持，也就是说现在移动端开发可以不用顾虑click会比较迟钝的问题了。如果initial-scale=1.0，在Chrome上是可以生效的，但是Safari不会。

2. 设置CSS

   html{
       touch-action: manipulation;
   }
   

   这样也可以取消掉300ms的延迟，Chrome和Safari都可以生效。

3. 使用fastclick.js插件

   1. npm install fastclick

   2. import FastClick from “fastclick”;

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

4. 自定义处理

   // 方式一
   try {
     // 禁用双击缩放
     document.addEventListener("touchstart", function (event) {
       if (event.touches.length > 1) {
         event.preventDefault();
       }
     });
     var lastTouchEnd = 0;
     document.addEventListener(
       "touchend",
       function (event) {
         var now = new Date().getTime();
         if (now - lastTouchEnd <= 300) {
           event.preventDefault();
         }
         lastTouchEnd = now;
       },
       false
     );
     // 禁用双指手势操作
     document.addEventListener("gesturestart", function (event) {
       event.preventDefault();
     });
   } catch (error) { }
   
   // 方式二
   window.onload = function () {
     //ios禁止双击缩放
     document.addEventListener('touchstart', function (event) {
       if (event.touches.length > 1) {
         event.preventDefault();
       }
     })
     var lastTouchEnd = 0;
     document.addEventListener('touchend', function (event) {
       var now = (new Date()).getTime();
       if (now - lastTouchEnd <= 300) {
         event.preventDefault();
       }
       lastTouchEnd = now;
     }, false)
     //ios禁止双指手势操作
     document.addEventListener('gesturestart', function (event) {
       event.preventDefault();
     });
   }