H5 touch事件处理

H5 开发中对touch事件的处理

export function handleTouch(element, callback, left, right) {
  var startX, startY, startT, isMove, isTouchEnd, deltaX, direction, pageWidth = document.body.clientWidth
  element.addEventListener("touchstart", function (e) {
    // e.preventDefault()

    // 单手指触摸或者多手指同时触摸，禁止第二个手指延迟操作事件
    if (e.touches.length === 1 || isTouchEnd) {
      var touch = e.touches[0]
      startX = touch.pageX
      startY = touch.pageY
      startT = +new Date() // 记录手指按下的开始时间
      isMove = false // 是否产生滑动
      isTouchEnd = false // 当前滑动开始
    }
    element.addEventListener("touchmove", function (e) {
      // e.preventDefault()

      // 如果当前滑动已结束，不管其他手指是否在屏幕上都禁止该事件
      if (isTouchEnd) return

      var touch = e.touches[0]
      deltaX = touch.pageX - startX;
      var deltaY = touch.pageY - startY;

      isMove = true
      direction = deltaX > 0 ? "right" : "left";// 判断手指滑动的方向
    })
  })

  element.addEventListener("touchend", function (e) {
    // e.preventDefault()

    var deltaT = +new Date() - startT; // 计算手指在屏幕上停留的时间
    if (isMove && !isTouchEnd) {
      // 发生了滑动，并且当前滑动事件未结束
      isTouchEnd = true // 标记当前完整的滑动事件已经结束
      // if (deltaT < 300) {
      //   // 如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都执行操作
      //   console.log('停留时间小于300ms', deltaX, pageWidth)
      //   direction === "left"
      //     ? callback(left)
      //     : callback(right)

      // } else {
        // 如果滑动距离小于屏幕的20%，则不切换
        if (Math.abs(deltaX) / pageWidth < 0.20) {
        } else {
          console.log('滑动距离大于屏幕的20%', deltaX, pageWidth)
          direction === "left"
            ? callback(left)
            : callback(right)
        }
      }
    // }
  })
}