Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情
它只在有两根或多根手指放在屏幕上的时候触发
事件处理函数中会得到一个GestureEvent类型的参数
它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息
这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。
gesturestart // 当有两根或多根手指放到屏幕上的时候触发
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
gestureend // 当倒数第二根手指提起的时候触发,结束gesture
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend

Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation;
var scale = event.scale;

这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = ‘scale(‘ + e.scale + startScale + ‘) rotate(‘ + e.rotation +
startRotation + ‘deg)’;

ps:如果你要滚动body,只需要一根手指轻轻拂动屏幕,但是你要滚动一个内部div或者iframe,则需要动用两根手指。
我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。

 

以下是几种普及得比较好的触摸事件,可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备):
(on)touchstart:触摸开始的时候触发
(on)touchmove:手指在屏幕上滑动的时候触发
(on)touchend:触摸结束的时候触发
(on)touchcancel:系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏:玩着的时候,突然来电话了,就触发touchcancel事件暂停游戏、存档等操作。

而每个触摸事件都包括了三个触摸对象列表,每个列表里包含了对应的一系列触摸点(触摸对象,用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,touch对象的unique ID ,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
client / clientY:触摸点相对于浏览器窗口viewport的位置,不包含滚动距离
pageX / pageY:触摸点相对于页面的位置,包含滚动距离
screenX /screenY:触摸点相对于屏幕的位置
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用。
有了这些信息,就可以依据这些事件信息为用户提供不同的反馈了。

 Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生touchend后),系统会判断接收到事件的element的内容是否被改变,
如果内容被改变,会解析为touch事件,接下来的click事件都不会触发,
如果内容没有改变,则会解析为click事件,按照mousedown,mouseup,click的顺序触发事件。
特别需要提到的是,在解析为click事件时,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。
因此有关于hover的小技巧,当点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时基于这个伪类所设置的css也是起作用的,直到用手指点击另外一个地方,才会完成mouseout事件。

gesture事件(手势事件)
与touch事件相近,也用得很多的是gesture事件,这个事件将在下一篇讲到。

touch事件demo

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<div id="canvas">
 <div id="move"></div>
 </div>
<style>
 *{margin:0;padding:0;}
 html,body{ width:100%;height:100%;}
 #canvas{position:relative;width:100%;height:100%;}
 #move{position:absolute;width:100px;height:100px;background:#0F0;}
 .spirit {position:absolute;width:50px;height:50px;background-color:red;}
 </style>
<script>
 var canvas = document.getElementById("canvas");
 var spirit, startX, startY;
 var a = 1;
 // touch start listener
 function touchStart(event) {
 event.preventDefault();
 if (spirit ||! event.touches.length) return;
 var touch = event.touches[0];
 startX = touch.pageX;
 startY = touch.pageY;
 spirit = document.createElement("div");
 spirit.className = "spirit";
 spirit.style.left = startX - 50 + "px";
 spirit.style.top = startY - 50 + "px";
 canvas.appendChild(spirit);
 spirit.innerHTML = a++;
 }
 // touch move listener
 function touchMove(event) {
 event.preventDefault();
 if (!spirit || !event.touches.length) return;
 var touch = event.touches[0];
 //spirit.style.left = touch.pageX - 50 + "px";
 //spirit.style.top = touch.pageY - 50 + "px";
 //或者用下面的
 var x = touch.pageX - startX;
 var y = touch.pageY - startY;
 spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
 }
 // touch end listener
 function touchEnd(event) {
 if (!spirit) return;
 canvas.removeChild(spirit);
 spirit = null;
 }
 // add touch start listener
 canvas.addEventListener("touchstart", touchStart, false);
 canvas.addEventListener("touchmove", touchMove, false);
 canvas.addEventListener("touchend", touchEnd, false);
 </script>

参考:http://www.jb51.net/html5/70096.html

http://blog.sina.com.cn/s/blog_51e565eb01018eff.html

http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html

© 2012 Hedgehog Suffusion theme by Sayontan Sinha