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；最后，通過兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。