HTML5的javascript touch事件

以下是几种普及得比较好的触摸事件，可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备）： (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>