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