js判断手指的上滑，下滑，左滑，右滑，事件监听

function _touch(){
    var startx;//让startx在touch事件函数里是全局性变量。
    var endx;
     //var el=document.getElementById('box');document.getElementsByTagName("body")[0] 
     var el=document.getElementsByTagName("body")[0] ;
    function cons(){   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
           console.log(starty,endy);
           var l=Math.abs(startx-endx);
           var h=Math.abs(starty-endy);
    
          if(l>h){
               // x事件
               if(startx>endx){
                    // alert('left');
               }else if(startx<endx){
                    // alert('right');
               }
               
          }else{
               // y事件
               if(starty>endy){
                   // alert('top');
                    $('.head').css('display','block');
                    $('.foot_box').css({'display':'block','bottom':'0px','top': 'inherit'});
               }else if(starty<endy){
                   // alert('bottom');
                   $('.head').css('display','none');
                   $('.foot_box').css({'display':'block','top':'0px','bottom': 'inherit'});
               }
          }

     }
     el.addEventListener('touchstart',function(e){
          var touch=e.changedTouches;
          startx=touch[0].clientX;
          starty=touch[0].clientY;
  });
   el.addEventListener('touchend',function(e){
       var touch=e.changedTouches;
       endx=touch[0].clientX;
       endy=touch[0].clientY;
       cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
 });
}

_touch();

原理：1：当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和staerY；

　　　2：当触发touchend事件的时候，再获取此时手指的横坐标endX和纵坐标endY；最后，通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。