1、事件

移动端点击会有300ms延迟问题： 可以通过
1、touchstart; 手指点击事件
2、touchmove; 手指移动事件
3、touchend； 手指离开事件
4、touchcancel； 突然手指中断触摸事件；（触摸时突然出现弹出框）

事件对象e中的触点信息：

e. touches 当前屏幕上所有触摸点的列表;；
e.changedTouches; 涉及当前(引发)事件的触摸点的列表
e.targetTouches; 当前对象上所有触摸点的列表

document.addEventListener('touchstart', function (e) {
  console.log(e)
}, false)

2、touch点击穿透的问题：

一：touchstar点击之后；会有默认的300ms穿透事件；300ms之后button按钮被点击
button、input、a等内置的click触发机制会默认触发
二：click事件没有默认穿透但会有300ms延迟的问题

2、fastclick.js库
使用之后点击事件的300ms延迟和touchstart事件穿透可以解决

// <script src='./js/fastclick.js'>
Fastclick.attach(document.body);

3、移动端点击事件的封装

// exam：let el = new TouchPack(el)
// el: 给哪一个元素添加touch
// el.tap(callback)  el.longtap(callback)
(() => {
  function TouchPack(opt) {
    this.el = document.querySelector(opt.el);
  }
  TouchPack.prototype = {
    tap(callback) {
      let sTime, eTime;
      let fn = function (e) {
        e.preventDefault(); // 去除触摸穿透和点击的默认事件
        switch (e.type) {
          case 'touchstart':
            sTime = new Date().getTime();
            break;
          case 'touchend':
            eTime = new Date().getTime();
            if (eTime - sTime <= 500) {
              callback.call(this);
            }
            break;
        }
      };
      this.el.addEventListener('touchstart', fn, false);
      this.el.addEventListener('touchend', fn, false);
    },
    longtap(callback, delay) {
      var delay = delay || 1000,
        t = null;
      let fn = function (e) {
        switch (e.type) {
          case 'touchstart':
            t = setTimeout(() => {
              callback.call(this);
            }, delay);
            break;
          case 'touchmove':
            clearTimeout(t);
            t = null;
            break;
          case 'touchend':
            clearTimeout(t);
            t = null;
            break;
        }
      };
      this.el.addEventListener('touchstart', fn, false);
      this.el.addEventListener('touchmove', fn, false);
      this.el.addEventListener('touchend', fn, false);
    },
  };
 window.TouchPack = TouchPack;
})();