移动端事件：

 // 手势事件

 touchstart            //当手指接触屏幕时触发

 touchmove           //当已经接触屏幕的手指开始移动后触发

 touchend             //当手指离开屏幕时触发

 touchcancel

 // 触摸事件

 gesturestart          //当两个手指接触屏幕时触发

 gesturechange      //当两个手指接触屏幕后开始移动时触发

 gestureend

 // 屏幕旋转事件

 onorientationchange    

 // 检测触摸屏幕的手指何时改变方向

 orientationchange      

 // touch事件支持的相关属性

 touches

 targetTouches

 changedTouches

 clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)

 clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)

 screenX　　　 // Relative to the screen

 screenY 　　  // Relative to the screen

 pageX　　 　　// Relative to the full page (includes scrolling)

 pageY　　　　 // Relative to the full page (includes scrolling)

 target　　　　 // Node the touch event originated from

 identifier　　   // An identifying number, unique to each touch event

屏幕旋转事件:

 // 判断屏幕是否旋转

 function orientationChange() {

     switch(window.orientation) {

     　　case 0:

             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);

             break;

     　　case -90:

             alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

             break;

     　　case 90:

             alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

             break;

     　　case 180:

         　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

         　　break;

     };

 };

 // 添加事件监听

 addEventListener('load', function(){

     orientationChange();

     window.onorientationchange = orientationChange;

 });

双手指滑动事件：

 // 双手指滑动事件

 addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},

             false              // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)

 );

 function twoFingerScroll(ev) {

           var delta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作

           return true;

 };

在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况：
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。 前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下。

一个demo：

 <!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="data: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="data: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的事件。1

 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手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途

移动前端javascript事件的更多相关文章

  1. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  3. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  4. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  5. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  6. JavaScript：JavaScript事件的处理

    JavaScript事件处理 —————事件的处理流程: —————动态事件绑定: —————常用的事件处理. 1.事件的概念 在页面之中,会针对用户的每一个操作进行记录.在页面中的事件可以简单的理解 ...

  7. 谈谈JavaScript事件

    众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...

  8. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  9. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

随机推荐

  1. jemalloc源码结构分析（三）：arena_malloc_small内存分布

    在arena_s结构中,由NBINS数组将bin按照不同规模等级分别存储,每一个等级对应一颗run树,即一颗以chunk_map_t为节点的红黑树,而这些chunk_map_t节点实际分布于各个chu ...

  2. 关于automatic_Panoramic_Image_Stitching_using_Invariant_features 的阅读笔记

    并没有都读完,不过感觉还是有必要做一个笔记的,毕竟这只是随笔不是文章,所以可以有多少写多少,也算是工作总结了,最重要的是这个好在可以,完成所有有意义文档的检索,比起自己的word来说高级很多~~~. ...

  3. [转]win7 64位下android开发环境的搭建

    本文转自:http://www.cfanz.cn/index.php?c=article&a=read&id=65289 最近换了新电脑,装了win7 64位系统,安装了各种开发环境, ...

  4. Java序列化接口的作用总结

    一个对象有对应的一些属性,把这个对象保存在硬盘上的过程叫做”持久化”. 把堆内存中的对象的生命周期延长,存入硬盘,做持久化操作.当下次再需要这个对象的时候,我们不用new了,直接从硬盘中读取就可以了. ...

  5. 百度地图SDK下载以及创建应用（申请Key）和本地导入Demo

    一.百度地图SDK下载 http://lbsyun.baidu.com/sdk/download?selected=location 选择全部,然后分别下载开发包.示例代码.类参考. 二.创建应用(申 ...

  6. Ubuntu lnmp安装记录

    参考了: Ubuntu 14.04 LTS 安装 LNMP Nginx\PHP5 (PHP-FPM)\MySQL 在访问 info.php的时候,我显示的是502错误.后面我参考了: Ubuntu15 ...

  7. 外部div自适应内部标签的高度，设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

  8. spark下统计单词频次

    写了一个简单的语句,还没有优化: scala> sc. | textFile("/etc/profile"). | flatMap((s:String)=>s.spli ...

  9. Spring分布式事务实现（适用于spring-tx 2.5）

    http://log-cd.iteye.com/blog/807607 分布式事务是指操作多个数据库之间的事务,spring的org.springframework.transaction.jta.J ...

  10. [转]十年前的老文：以 Linux 的名义

    一.灰姑娘的狂欢 今年初,林纳斯·托瓦兹承认:“如果在12年前,有人告诉我Linux会发展到今天的模样,我肯定会惊得目瞪口呆.” 托瓦兹说的是实话.1991年,这名21岁的芬兰赫尔辛基大学的学生,偶然 ...