移动前端工作的那些事---touch

在互联网中,一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件,但是在移动前端,用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的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; margin: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.getElementById_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.getElementById_x("phone").src = c1[c_i].src;
}

//向右滑动方法
var showPicRight = function(){
  c_i++;
  if(c_i > 72){
    c_i = 1;
  };
  document.getElementById_x("phone").src = c1[c_i].src;
}

var zidongleft;
var zidongright;
var panduanleft=false;
var panduanright=false;

//添加向左自动滑动功能
document.getElementById_x("toleft").addEventListener("touchstart",function(event){
   window.clearInterval(zidongright);
   if(panduanleft==false){
     zidongleft=setInterval(function(){defaults.swipeLeft()},50);
     }
   panduanleft=true;
   panduanright=false;
},false);

//添加向右自动滑动功能
document.getElementById_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);
[/run]我们为这个对象添加监听事件,touchstart就是表示当手指刚放到屏幕上就触发,通过event对象我们可以获取当前触摸点的坐标。
即event.targetTouches[0].pageX; event.targetTouches[0].pageY;
其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。
通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;
这样,我们就可以获取到当前触摸点的X和Y坐标。

接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。[code]
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手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。

时间: 2024-10-07 20:16:11

移动前端工作的那些事---touch的相关文章

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty

移动前端工作的那些事---前端制作篇之框架篇

为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch.JQTouch.Jquery-moblie.jqMobi等等.这些框架都有优缺点,不同的框架应用在不同的项目中.现简单阐述一下各框架的优缺点: 一.Sencha Touch框架是一个重量级的框架.它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用.所以最后转投其他框架.这个框架兼容性很高,运行起来的速度

移动前端工作的那些事---前端制作之动画效率问题简析

动画特效方面,尤其兼容安卓系统,就和互联网端兼容IE6一样麻烦.好多效果不错的创意都因为不兼容安卓系统而夭折.归根到底还是因为安卓浏览 器性能的问题.这里篇外话一下,安卓手机的硬件可以甩苹果一条街.但在浏览器上表现的则相反.现在安卓系统已经发展到android 4.X了.可分配给浏览器的内存还是少的可怜!貌似不足10%; 所以一些很流畅的动画效果在IOS上跑一点压力没有.但在android上跑卡的要命!希望android 5.0时可以多给点内存在浏览器上,尽量提升一下浏览器的性能比. 言归正传,

移动前端工作的那些事---前端制作篇之link标签篇

上文的meta标签中,提到了部分功能要结合link标签进行使用.下面详细的解释一下移动端的link标签.link标签主要是存放CSS文件的地方,同时还有一些专属的移动端设置在这里体现.结合以下代码进行说明: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=d

献给即将想从事前端工作的你们

时间过得很快,出来实习工作快两个月了,在这里,想跟大家分享自己的一些体会与经验. 还没出来工作之前,在学校就一直很想能快点出来工作,总以为工作能多学到很多在学校里学不到的东西.也确实如此,工作是可以学到很多,但我还是很想跟那些要从事IT的你们说,还没工作之前还是多学点东西,把基础打好.不要总想着出来工作后再学,到时你们会发现其实真的很吃力,压力会很大,公司是做事的地方,它每天都有你要完成的任务,每天有一定的工作量,也不要总想着工作中有人会一步步教你怎么做,上司可能只会跟你说一下大概的思路,他想你

工作这点事

自己也是做技术多年,之前一直在一家制造企业做服务器运维,做技术久了人也就麻木了,感觉公司的业务和我没多大关系,呵呵. 在前家公司有机会参加了redhat的培训,并在2010年拿到RHCE证书.接触到企业开源操作系统,令自己眼界大开,也让自己下决心在开源系统上多下功夫研究. 2014年,可以说是我自己人生转折的一年吧,或许在传统行业干久了,老技术不顶用,新技术传统行业恐怕是用不上,另外自己也快到了要结婚的年龄,数数那点工资,自己的生存压力还是蛮大的,所以决定到魔都来讨生活,有幸进入互联网企业.大家

前端工作流程自动化——Grunt/Gulp 自动化

前端工作流程自动化--Grunt/Gulp 自动化 Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的前端自动化构建工具. 那么问题来了,Grunt和Gulp到底哪家强?在回答这个问题前,先给大家看一组下面的数据: 再看看实现同样功能的配置代码: 作者本人之前一直使用Grunt来做自动化构建的,在Gulp出来后,经过一段时间的试用感觉配置比Grunt方便多了,如果你两者还没接触过,本人推荐直接使用G

起点没有选对,想找好的前端工作只能越找越累

一.到底什么才是一份好的前端工作? 自从开始做咨询,就不断有人问我:"老师,前端这个行业行业怎么样啊?有发展吗?"或者是:"老师,做IT,算不算一份好工作啊?"工作,是一个永恒的话题:没工作的人需要一份工作:有工作的人需要一份好工作:问题来了:"好工作",长什么样子呢?什么才算是一份好工作呢? 大多数人估计没想过这个费脑筋的问题:既然用感性的语言难以描述,干脆用一个全国通用指标:薪资,挣得多,就是好工作! 经常听到有学员说,一个月给我5万,让我天