<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
   <style type="text/css">
      .box{
         height: 600px;
         background: pink;
      }
   </style>
   <body>
      <div class="box"></div>
   </body>
   <script type="text/javascript">
      
      //0.获取元素
      
      var box = document.querySelector('.box');
      
      //1. 添加触摸开始事件
      
      box.addEventListener('touchstart',function(e){
         
         console.log('触摸开始')
         //console.log(e)
         
      })
      
      //2. 添加触摸移动事件
      
      box.addEventListener('touchmove',function(e){
         
         //2.1获取触摸点
         
         var ev = e.changedTouches[0];
         
         //console.log(ev)
         console.log('触摸移动'+ev.clientX+'=='+ev.clientY)
         
      })
      //3. 添加触摸取消事件
      
      box.addEventListener('touchcancel',function(){
         
         console.log('触摸意外取消')
         
      })
      //4. 添加触摸结束事件
      
      box.addEventListener('touchend',function(){
         
         console.log('触摸结束')
         
      })
      
      setTimeout(function(){
      // alert()
      },500)
      
      
      
      
   </script>
</html>