JavaScript移动端的手指触摸touch事件

目录

• 概念
• touchstart 触摸发生事件
• touchend 触摸结束事件
• touchmove 触摸移动事件
• touchcancel 触摸取消事件
• 自定义事件
  • 自定义轻触事件方法touchtap
  • 自定义左右划动事件方法touchswiper

概念

• 在JavaScript中，移动端基本的手指触摸touch事件有四种，分别为：

1. touchstart : 手指触摸屏幕时触发
2. touchend : 手指离开屏幕的时候触发
3. touchmove : 手指在屏幕上移动时触发
4. touchcancel : 手指被迫中断触摸屏幕的时候触发

为了让下面的事件方法易于展示，我们可以先给HTML中的body标签写上高度

  <style>
    body{
      height: 500px;
    }
  </style>

以下是 touchstart, touchend, touchmove 和 touchcancel 事件的简单应用

touchstart 触摸发生事件

  <script>
    // 为body标签添加touchstart事件监听
    document.body.addEventListener('touchstart', function(e){
      console.log(e, '手指摸到屏幕');
    })
  </script>

touchend 触摸结束事件

  <script>
    // 为body标签添加touchend事件监听
    document.body.addEventListener('touchend', function(e){
      console.log(e, '手指离开屏幕');
    })
  </script>

touchmove 触摸移动事件

  <script>
    // 为body标签添加touchmove事件监听
    document.body.addEventListener('touchmove', function(e){
      console.log(e, '手指在屏幕上移动');
    })
  </script>

touchcancel 触摸取消事件

 <script>
    // 为body标签添加touchcancel事件监听
    setTimeout(() => {
      alert('定时器触发')
    }, 2000)
    document.body.addEventListener('touchcancel', function (e) {
      console.log(e, '手指在屏幕上取消')
    })
  </script>

以下是综合运用 touchstart, touchend, touchmove 和 touchcancel 事件来自定义创建touch事件

自定义事件

• 这里的自定义事件是指：通过运用 touchstart, touchend, touchmove 和 touchcancel 事件方法的各种结合来自定义创建其他touch事件

自定义轻触事件方法touchtap

    <script>
      // 自定义创建轻触事件方法touchtap
      function touchtap(dom, fn) {
        var startTime // 声明触摸发生的时间
        var endTime // 声明触摸结束的时间
        var isMove // 判断触摸是否发生了移动
        // touchstart
        dom.addEventListener('touchstart', function (e) {
          // 记录触摸发生的时间
          startTime = new Date().getTime()
          isMove = false
        })
        // touchmove
        dom.addEventListener('touchmove', function (e) {
          isMove = true
        })
        // touchend
        dom.addEventListener('touchend', function (e) {
          // 记录触摸结束的时间
          endTime = new Date().getTime()
          if (endTime - startTime < 150 && isMove == false) {
            // 符合轻触事件后执行的方法fn()
            fn()
          }
        })
      }
      // 使用轻触事件方法
      touchtap(document.body, () => {
        console.log('轻触发生了')
      })
    </script>

自定义左右划动事件方法touchswiper

    <script>
      // 自定义创建左右划动事件方法
      function touchswiper(dom, fn) {
        // 定义一个变量用来记录手指按下时，手指距离屏幕左侧的距离
        var startLocation // 声明触摸的开始坐标
        var endLocation // 声明触摸的结束坐标
        // touchstart
        dom.addEventListener('touchstart', function (e) {
          // 获取触摸的开始坐标
          startLocation = e.touches[0].pageX
        })
        // touchend
        dom.addEventListener('touchend', function (e) {
          // 获取触摸的结束坐标
          endLocation = e.changedTouches[0].pageX
          // 触摸的结束坐标小于开始坐标即为左划
          if (endLocation < startLocation) {
            // 符合左划动事件后执行的方法fn()
            fn('向左')
          }
          // 触摸的结束坐标大于开始坐标即为右划
          if (endLocation > startLocation) {
            // 符合右划动事件后执行的方法fn()
            fn('向右')
          }
        })
      }
      // 使用左右划动事件方法
      touchswiper(document.body, (direction) => {
        console.log(direction + '划动')
      })
    </script>