手机端使用原生js封装tap事件

190 阅读1分钟

/**
 * 封装tap事件代替click事件
 */

function tap(ele, fn) {
  try {
    let startTx, startTy;
    let endTx, endTy;
    let startTime, endTime;
    ele.addEventListener('touchstart', function (e) {
      if (e.touches.length > 1) {
        return;
      }
      let touches = e.touches[0];
      startTx = touches.clientX;
      startTy = touches.clientY;
      startTime = Date.now();
    }, false);

    ele.addEventListener('touchend', function (e) {
      if (e.cancelable) {
        e.preventDefault();
      }
      if (e.touches.length > 1) {
        return;
      }
      endTime = Date.now();
      var touches = e.changedTouches[0];
      endTx = touches.clientX;
      endTy = touches.clientY;
      if (endTime - startTime > 150) {
        return;
      }
      if (Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6) {
        fn(e);
      }
    }, false);
  } catch (e) {
    console.log(e);
  }

}

这里这个(endTime - startTime > 150)当时自己改过100,会出现问题,记得当时是在Android上不会响应,ios没问题。改成300稍微有些慢,所以改成150