移动端事件

事件类型

移动端事件列表

touchstart 元素上触摸开始时触发
touchmove 元素上触摸移动时触发
touchend 手指从元素上离开时触发
touchcancel 触摸被打断时触发

这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。

应用场景

touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换
touchmove 事件可用于页面的滑动特效，网页游戏，画板
touchend 事件主要跟 touchmove 事件结合使用
touchcancel 使用率不高

注意：

touchmove 事件触发后，即使手指离开了元素，touchmove 事件也会持续触发
触发 touchmove 与 touchend 事件，一定要先触发 touchstart
事件的作用在于实现移动端的界面交互

事件绑定

方式一

box.ontouchstart = function(){
    console.log('touch start')
}

方式二

box.addEventListener('touchstart', function(){
    console.log('touch start')
})

这里推荐使用第二种，第一种有时会失灵。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #demo {
         100%;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="demo"></div>
    <script>
      //   demo.ontouchstart = function() {
      //     console.log('触摸屏幕开始')
      //   }
      //   demo.ontouchmove = function() {
      //     console.log('触摸屏幕移动')
      //   }
      //   demo.ontouchend = function() {
      //     console.log('触摸屏幕结束')
      //   }
      //   demo.ontouchcancel = function() {
      //     console.log('触摸屏幕中断')
      //   }

      demo.addEventListener('touchstart', function() {
        console.log('手指触摸屏幕了')
      })
    </script>
  </body>
</html>