移动前端工作的那些事—前端制作篇之javascript篇(二)

在互联网中,一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件,但是在移动前端,用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发,但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。

在移动端的手势事件一般有四种情况:

touchstart:  手指放到屏幕上的时候触发
touchmove:  手指在屏幕上移动的时候触发
touchend:  手指从屏幕上拿起的时候触发
touchcancel:  系统取消touch事件的时候触发。前三者应用很广泛,第四个应用较少。至今所做的项目中,第四项还没涉及过。如果有人用过,可以拿出来分享一下。

前三者可以看成是用户操作的一个过程。它们一般都是结合在一起使用。我举个360°旋转的例子,通过代码详细说明一下。

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=480" />
<head>
<style>
#stage{
 width:480px;
 height:360px;
 overflow:hidden;
 background-color: black;
}

#bg {
 position:relative;
 width:480px;
 height:360px;
 overflow:hidden;
 background-color: red;
}


#phone {
 position:absolute;
 left:0px;
 top:0px;
}

</style>
<title>360°旋转</title>
</head>

<body style="overflow:hidden;padding:0;%20margin:0;">

    <div id="stage">
        <div id="bg">
            <img id="phone" src="images/360pic1.jpg" />
        </div>
    </div>
    <span id="toleft">往左转</span>

    <span id="toright">往右转</span>
   
<script type="text/javascript">

 var c_i = 1;
 var c1=new Array();
 //创建数组,i的数量是图片的总数;进行for循环。
 for(var i=1;i<=72;i++){
  c1[i]=new Image();
  c1[i].src="images/360pic"+i+".jpg";
 }
 
 //定义要360度旋转的对象
 var main_swipe = document.getElementByIdx_x("phone");
 
 //创建滑动的基本距离和滑动方法属性。
 var defaults = {
  threshold: {
  x: 10,
  y: 30
  },
  swipeLeft: function() {showPicLeft();},
  swipeRight: function() {showPicRight();},
 };
 //定义初始坐标
 var originalCoord = { x: 0, y: 0 };
 var shiftCoord = { x: 0, y: 0 };
 var finalCoord = { x: 0, y: 0 };
 
 main_swipe.addEventListener("touchstart",function(event) {
  
  //定义滑动初始时的坐标
  originalCoord.x = event.targetTouches[0].pageX;
  originalCoord.y = event.targetTouches[0].pageY;
  shiftCoord.x = event.targetTouches[0].pageX;
  shiftCoord.y = event.targetTouches[0].pageY;
  finalCoord.x = originalCoord.x;
  finalCoord.y = originalCoord.y;
  
 }, false);
 
 main_swipe.addEventListener("touchmove",function(event) {
  
  //定义滑动中的坐标
  event.preventDefault();
  finalCoord.x = event.targetTouches[0].pageX;
  finalCoord.y = event.targetTouches[0].pageY;
  
  //当横向滑动距离大于5时,则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
  if(finalCoord.x - shiftCoord.x > 5){
     window.clearInterval(zidongright);
     window.clearInterval(zidongleft);
     panduanleft=false;
     panduanright=false;
     defaults.swipeLeft();
     shiftCoord.x = finalCoord.x;
  
  }else if(finalCoord.x - shiftCoord.x < -5){
   
    window.clearInterval(zidongright);
     window.clearInterval(zidongleft);
     panduanleft=false;
     panduanright=false;
     defaults.swipeRight();
     shiftCoord.x = finalCoord.x;
 
    }
 }, false);
 
 main_swipe.addEventListener("touchend",function(event) {
  
  var changeY = originalCoord.y - finalCoord.y;
  
  //滑动结束时,进行坐标判断。并执行向左或是向右的方法
  if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
   
   changeX = originalCoord.x - finalCoord.x;
   
   if(changeX > defaults.threshold.x) {
      window.clearInterval(zidongright);
      window.clearInterval(zidongleft);
      panduanleft=false;
      panduanright=false;
      defaults.swipeRight();
   }
   
   if(changeX < (defaults.threshold.x*-1)) {
      window.clearInterval(zidongright);
      window.clearInterval(zidongleft);
      panduanleft=false;
      panduanright=false;
      defaults.swipeLeft();
   }
  }
 }
 , false);
 
 //向左滑动方法
 var showPicLeft = function(){
  c_i--;
  if(c_i < 0){
   c_i = 72;
   };
  document.getElementByIdx_x("phone").src = c1[c_i].src;
 }
 
 //向右滑动方法
 var showPicRight = function(){
  c_i++;
  if(c_i > 72){
    c_i = 1;
  };
  document.getElementByIdx_x("phone").src = c1[c_i].src;
 }
 
 var zidongleft;
 var zidongright;
 var panduanleft=false;
 var panduanright=false;
 
 //添加向左自动滑动功能
 document.getElementByIdx_x("toleft").addEventListener("touchstart",function(event){
   window.clearInterval(zidongright);
   if(panduanleft==false){
     zidongleft=setInterval(function(){defaults.swipeLeft()},50);
     }
   panduanleft=true;
   panduanright=false;
 },false);
  
 //添加向右自动滑动功能 
 document.getElementByIdx_x("toright").addEventListener("touchstart",function(event){
    window.clearInterval(zidongleft);
    if(panduanright==false){
      zidongright=setInterval(function(){defaults.swipeRight()},50);
      }
    panduanright=true;
    panduanleft=false;
 },false);
 
</script>
</body>
</html>

代码中,定义了一个元素main_swipe,这个元素就是要进行手势操作的对象。

main_swipe.addEventListener("touchstart",function(event) {
  
  //定义滑动初始时的坐标
  originalCoord.x = event.targetTouches[0].pageX;
  originalCoord.y = event.targetTouches[0].pageY;
  shiftCoord.x = event.targetTouches[0].pageX;
  shiftCoord.y = event.targetTouches[0].pageY;
  finalCoord.x = originalCoord.x;
  finalCoord.y = originalCoord.y;
  
 }, false);

我们为这个对象添加监听事件,touchstart就是表示当手指刚放到屏幕上就触发,通过event对象我们可以获取当前触摸点的坐标。

即event.targetTouches[0].pageX; event.targetTouches[0].pageY;

其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。
通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;

这样,我们就可以获取到当前触摸点的X和Y坐标。

接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。

main_swipe.addEventListener("touchmove",function(event) {
  
  //定义滑动中的坐标
  event.preventDefault();
  finalCoord.x = event.targetTouches[0].pageX;
  finalCoord.y = event.targetTouches[0].pageY;
  
  //当横向滑动距离大于5时,则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
  if(finalCoord.x - shiftCoord.x > 5){
     window.clearInterval(zidongright);
     window.clearInterval(zidongleft);
     panduanleft=false;
     panduanright=false;
     defaults.swipeLeft();
     shiftCoord.x = finalCoord.x;
  
  }else if(finalCoord.x - shiftCoord.x < -5){
   
     window.clearInterval(zidongright);
     window.clearInterval(zidongleft);
     panduanleft=false;
     panduanright=false;
     defaults.swipeRight();
     shiftCoord.x = finalCoord.x;
 
    }
 }, false);

注意,在获取触摸移动中的坐标的时候,一定要先把浏览器的默认行为禁止 event.preventDefault();

触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。

通过条件判断,当touchmove时的X坐标大于touchstart时的X坐标,则证明用户向右滑动,反之则向左滑动。

通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。

当手指离开屏幕时,即touchend。同样要获取离开的坐标,以便为下一次touchstart来进行坐标定义。

main_swipe.addEventListener("touchend",function(event) {
   var changeY = originalCoord.y - finalCoord.y;
  
  //滑动结束时,进行坐标判断。并执行向左或是向右的方法
  if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
   
   changeX = originalCoord.x - finalCoord.x;
   
   if(changeX > defaults.threshold.x) {
      window.clearInterval(zidongright);
      window.clearInterval(zidongleft);
      panduanleft=false;
      panduanright=false;
      defaults.swipeRight();
   }
   
   if(changeX < (defaults.threshold.x*-1)) {
      window.clearInterval(zidongright);
      window.clearInterval(zidongleft);
      panduanleft=false;
      panduanright=false;
      defaults.swipeLeft();
   }
  }
 }
 , false);

 

以上的效果,就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。

原文:http://blog.sina.com.cn/s/blog_3f1fc8950101gaft.html