Web移动端轻划事件.

1：轻划事件其实就是touchstart和touchend两个事件的触发和运用

//这里是一些用来测试的默认样式
<style>

       .box{

           width: 200px;

           height: 200px;

           background-color: blue;

           margin: 100px auto;

       }

   </style>
  <div class="box">

   </div>
<script>
  //绑定
   var box = document.querySelector(".box");
   //按下的时间
   var startTime;
   //按下的坐标
   var startX,startY;
</script>

2:然后就是touchstart事件，绑定在box上

//添加touchstart事件给box
    box.addEventListener("touchstart",function (e) {

        //先判断手指的个数，手指不能超过一根
        if(e.touches.length>1){
            return;
        }

        // Touches事件是屏幕上所有触摸点的集合
        //记录下开始时按下的时间
        startTime = Date.now();

        //记录按下的坐标
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      })

3:然后就是touchend事件，同样绑定在box上

   //按下
    box.addEventListener("touchstart",function (e) {

        //先判断手指的个数
        if(e.touches.length>1){
            return;
        }

        // Touches事件是屏幕上所有触摸点的集合
        //记录按下的时间
        startTime = Date.now();


        //记录按下的坐标
        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;
      })


      //离开
      box.addEventListener("touchend",function (e) {

          //判断手指的个数,手指的个数不能超过一个
          //一个手指离开的时候显示为1
          if(e.changedTouches.length >1){
                return;
          }

          //记录下离开的时间

          var endTime = Date.now();

        //判断触摸的时间

        if(endTime - startTime > 800){
            return;
        }

        //先判断距离在判断方向，如果没有产生距离就直接返回，不满足条件
        var endX = e.changedTouches[0].clientX;
        var endY = e.changedTouches[0].clientY;


        //方向
        var direction;

        //大于5是指要至少移动5个PX
        if(Math.abs(endX-startX)>5){
            //结束的X坐标比开始的X坐标大的时候，是右滑动
            direction = endX > endY ? "right" : "left";
        }else {
            return;
        }
          //这里最后输出结果看一下
            console.log(direction);
            
        })