html5学习第一课touch事件

最近开始了html5的学习，在学习的同时我把内容纪录下来，和你们一块儿分享。

　　今天在用手机触摸屏的时候，很想知道html5针对触摸屏上的处理，索性就先来学触摸事件（touchstart、touchmove和touchend）。

      触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

 

　　touchstart事件：当手指触摸屏幕时候触发，即便已经有一个手指放在屏幕上也会触发。

　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件能够阻止滚动。

　　touchend事件：当手指从屏幕上离开的时候触发。

　　touchcancel事件：当系统中止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并无具体说明，我们只能去猜想了。

 

　　上面的这些事件都会冒泡，也均可以取消。虽然这些触摸事件没有在DOM规范中定义，可是它们倒是以兼容DOM的方式实现的。因此，每一个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法能够取消与事件关联的默认动做)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

 

　　touches：表示当前跟踪的触摸操做的touch对象的数组。

　　targetTouches：特定于事件目标的Touch对象的数组。

　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

 

　　每一个Touch对象包含的属性以下。

 

　　clientX：触摸目标在视口中的x坐标。

　　clientY：触摸目标在视口中的y坐标。

　　identifier：标识触摸的惟一ID。

　　pageX：触摸目标在页面中的x坐标。

　　pageY：触摸目标在页面中的y坐标。

　　screenX：触摸目标在屏幕中的x坐标。

　　screenY：触摸目标在屏幕中的y坐标。

　　target：触目的DOM节点目标。

这些事件会在文档的全部元素上面触发，于是能够分别操做页面的不一样部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序以下：

 

　　(1)touchstart

　　(2)mouseover

　　(3)mousemove(一次)

　　(4)mousedown

　　(5)mouseup

　　(6)click

　　(7)touchend

 

　　介绍了这么多，这些触摸事件的兼容状况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

 

 

　　针对触摸事件，咱们能够滑动屏幕打开相应功能操做，下面介绍一下滑屏遇到的问题和解决办法。

问题描述

一、用户手动滑动屏幕，根据滑动的方向，打开相应的功能（如：向上滑摇钱树经验明细，向下滑打开任务明细，向左滑打开聚宝盆物品查看等功能），滑动事件捕获问题。

二、你们都知道，划动都有角度问题，如：向330度方向滑动手机，要计算出它的方向问题。

三、HTML5提供的滑动事件，只能读取到起点和终点坐标，计算角度问题。

四、手机屏幕坐标与标准坐标系转换问题。

解决方案

一、滑动屏幕事件使用HTML5 的touchstart滑动开始事件和touchend滑动结束事件。

二、方向的判断，以起点作平面坐标系，与终点连线作直线，直线与x正半轴计算角度；咱们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。

三、使用Math.atan2来计算起点与终点造成的直线角度。

四、仔细对比标准坐标系与屏幕坐标系，咱们发现，标准坐标系，上半轴为负值，要实现转换，只须要调换Y坐标起点与终于位置便可。

处理代码以下：

//返回角度

function  GetSlideAngle(dx, dy) {

     return  Math.atan2(dy, dx) * 180 / Math.PI;

}

 

//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动

function  GetSlideDirection(startX, startY, endX, endY) {

     var  dy = startY - endY;

     var  dx = endX - startX;

     var  result = 0;

 

     //若是滑动距离过短

     if  (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

         return  result;

     }

 

     var  angle = GetSlideAngle(dx, dy);

     if  (angle >= -45 && angle < 45) {

         result = 4;

     } else  if  (angle >= 45 && angle < 135) {

         result = 1;

     } else  if  (angle >= -135 && angle < -45) {

         result = 2;

     }

     else  if  ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

         result = 3;

     }

 

     return  result;

}

 

//滑动处理

var  startX, startY;

document.addEventListener( 'touchstart' , function  (ev) {

     startX = ev.touches[0].pageX;

     startY = ev.touches[0].pageY;  

}, false );

document.addEventListener( 'touchend' , function  (ev) {

     var  endX, endY;

     endX = ev.changedTouches[0].pageX;

     endY = ev.changedTouches[0].pageY;

     var  direction = GetSlideDirection(startX, startY, endX, endY);

     switch  (direction) {

         case  0:

             alert( "没滑动" );

             break ;

         case  1:

             alert( "向上" );

             break ;

         case  2:

             alert( "向下" );

             break ;

         case  3:

             alert( "向左" );

             break ;

         case  4:

             alert( "向右" );

             break ;

         default :           

     }  

}, false );

 

 介绍了这些，相信对html5的touch也有所掌握了，如下为资料的来源，谢谢他们的分享。

http://www.2cto.com/kf/201402/276737.html

http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html