javascript手机手势动作触屏分析

04 Feb 2015

之前也要做过手机的触屏分析，今天我来说一下js的触屏分析

  $(function(){
   document.getElementById("moveId").addEventListener('touchstart',touchStart)
   document.getElementById("moveId").addEventListener('touchmove',touchMove)
   document.getElementById("moveId").addEventListener('touchend',touchEnd)
   isdrag=false
  })

那上面是实例来说，在实现手机端触屏，我们必须采用 js的addEventListener,接着加上touchStart,touchMove,touchEnd, 上面我在代码是加上了 Jquery，仅仅是用来获取ID和css，Jquery 大家都在用，但是对于事件的添加。大家还是得用document,getElementById这种模式，因为这东西只有JS才有，Jquery里并没有 touch这样的东西。
```
  function touchStart(e){
    isdrag=true;
    e.preventDefault();
    tx=parseInt($("moveId").css('left'));
    ty=parseInt($("moveId").css('top'));
    x=e.touches[0].pageX;
    y=e.touches[0].pageY;
  }
```
代码里面有一句，e.preventDefault（），相信大家都美看懂意思，但假设不些这一句，你在触屏的时候页面就回滑动，所以他的作用是非常大的，
e.touches[0]表示什么呢？就是手势里的第一种，我们就认为是touch吧。

触屏里还有其它两个手指的手势，我今天就学一种。我们取得对像的left,top及手的触屏位置，这时，touchstart完成了。。

  function touchMove(e){
     if(isdrag){
       e.preventDefault();
       var w=tx+e.touches[0].pageX-x;
       var h=ty+e.touches[0].pageY-y;
       $("#moveid").css('left',w);
       $("#moveid").css('top',h);
     }
  }

我们那个isdrag是用来判断是否可以拖动的，我们用手拖动后的位置加上对像的位置减去touchstart时的位置，就可以取得移动后的位置，这样，我们就完成了touchmove这个过程。。
对于touchend，我们就写上一个ifdrag=false,表示不再拖动啦
```
  function touchEnd(e){
     isdrag=false;
     e.preventDefault();
  }
```

案例代码

  <!DOCTYPE>
  <html> 
  <head>
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="MobileOptimized" content="320"/>
  <title>触屏特效,手机网页</title>
  <style type="text/css">
      html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
      body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}
      .dragme{background:#000;width:60px;height:60px; color:#fff; position:absolute; left:40px; top:40px; text-align:center; line-height:60px;}   
  </style>   
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  </head>   
  <body>   
  <div id="moveid" class="dragme"> 
      Super xing
  </div> 
  <script type="text/javascript"> 
  var isdrag=false;   
  var tx,x,ty,y;    
  $(function(){   
      document.getElementById("moveid").addEventListener('touchstart',touchStart);  
      document.getElementById("moveid").addEventListener('touchmove',touchMove);
      document.getElementById("moveid").addEventListener('touchend',function(){  
          isdrag = false;  
      }); 
  });
  function touchStart(e){   
     isdrag = true; 
     e.preventDefault();
     tx = parseInt($("#moveid").css('left'));    
     ty = parseInt($("#moveid").css('top'));  
     x = e.touches[0].pageX;
     y = e.touches[0].pageY;  
  }   
  function touchMove(e){   
    if (isdrag){
     e.preventDefault();
  	   var w = tx + e.touches[0].pageX - x;
  	   var h = ty + e.touches[0].pageY - y;   
  	   $("#moveid").css("left",w); 
  	   $("#moveid").css("top",h);    
     }  
  }    
  </script> 
  </body>
  </html>

Edit - Tweet

#javascript #touch #移动端