【实用随记】touch事件

新项目是webApp 有一个滑动折叠菜单的效果 

一开始向左滑呼出菜单，右滑隐藏，

但由于事件被我加在整个content上 所以机器默认的上下滑动拖拽屏幕就无法执行了，

而我整个页面又是很长的，所以目前把滑动事件加在菜单上，只能执行右滑折叠菜单。

肯定有更好的方法，但是目前项目赶进度，就先这样吧。

 //展示菜单栏函数
            function showMenu (argument) {
                $('.content').animate({'left':menuWidth}, {
                    duration: 200,
                    queue: false,
                    progress:function() {
                        $('.header').css('left',menuWidth);
                        $('.newFrontPage-menu').css({
                            right: '0',
                            display:'block'
                        });
                    }
              });  
            }
            //收起菜单栏函数
            function hideMenu (argument) {
                $('.content').animate({'left':'0'}, {
                    duration: 200,
                    queue: false,
                    progress:function() {
                        $('.header').css('left','0');
                        $('.newFrontPage-menu').css({
                            right: '-100%',
                            display:'none'
                        });
                    }
              });  
            }
            //点击触发菜单栏折叠
            $('.header-menu').click(function() {
                if($('.newFrontPage-menu').css('display') == 'block'){
                    hideMenu();
                }else{
                    showMenu();
                }

            });
            var lgszys =false;
           //触摸事件
        function touchStart(ev){
          try{
              sX = ev.touches[0].pageX;  //获取第一X个坐标
              sY = ev.touches[0].pageY;  //获取第一Y个坐标
              if(ev.touches.length > 1){ //判断多触摸
                  lgszys = false;
              }else{
                  lgszys = true;
              }
          }catch(ev){
             //alert('touchEnd:'+ev.message)
          }
        }
        //滑动事件
        function touchMove(ev){
          try{
              ev.preventDefault();  //阻止触摸时浏览器的缩放、滚动条滚动
              if(lgszys == true){
                  var touches = ev.touches[0]; //获取第一个触点
                  eX = touches.pageX;   //页面触点X坐标
                  eY = touches.pageY;   //页面触点Y坐标
                  var enX = sX - eX;
                  var enY = sY - eY;
                  if(Math.abs(enX) > Math.abs(enY) && Math.abs(enY) > 2){   //左右事件
                      //确保一个触摸不捏刷
                      if ( ev.touches.length > 1 || ev.scale && ev.scale !== 1) return  //多触摸判断，当前为一根手指以触发事件，由于JS对手指个数触摸屏幕判断没有非常精确，当两手指触摸距离很接近时，会被处理为一根手指，还有可能会触发touchEnd事件
                      ydxs = sX - eX;  
                  }
              }
          }catch(ev){
             //alert('touchMove:'+ev.message)
          }
        }
        //离开事件
        function touchEnd(ev){
          try{
              if(lgszys == true){  //多个手指触摸判断
                  if(ydxs > 0 && ydxs > 50){  //左滑动(滑动超过50才执行)
                        showMenu();
                  }else if(ydxs < 0 && ydxs < -50){  //右滑动(滑动超过50才执行)
                        hideMenu();
                  }
              }
          }catch(ev){
             //alert('touchEnd:'+ev.message)
          }
        }

//手指事件
        document.getElementById('content-mod').addEventListener('touchstart',touchStart,false);//接触
        document.getElementById('content-mod').addEventListener('touchmove',touchMove,false);   //滑动
        document.getElementById('content-mod').addEventListener('touchend',touchEnd,false);