前言
如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢??诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。在本文中，我会深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。
触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1.touchstart：手指放在一个DOM元素上。2.touchmove：手指拖曳一个DOM元素。3.touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1.touches：当前位于屏幕上的所有手指的一个列表。2.targetTouches：位于当前DOM元素上的手指的一个列表。3.changedTouches：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1.identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。2.target：DOM元素，是动作所针对的目标。3.客户/页面/屏幕坐标：动作在屏幕上发生的位置。4.半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。
可触控应用
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。
下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素：
var obj = document.getElementById(‘id’);obj.addEventListener(‘touchmove’, function(event) {// 如果这个元素的位置内只有一个手指的话if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置obj.style.left = touch.pageX + ‘px’;obj.style.top = touch.pageY + ‘px’;}}, false);
下面是一个示例，该例子显示了屏幕上当前所有的触点，它的作用就是用来感受一下设备的响应性。
// 设置画布并通过ctx变量来暴露上下文canvas.addEventListener(‘touchmove’, function(event) {for (var i = 0; i < event.touches.length; i++) {var touch = event.touches[i];ctx.beginPath();ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);ctx.fill();ctx.stroke();}}, false);
演示
到处都有着许多有意思的多点触摸演示，比如说这个由Paul Irish和其他人实现的基于画布的绘画演示。
还有Browser Ninja，一个技术演示，是一个使用了CSS3的转换、过渡和画布的Fruit Ninja克隆。
最佳做法
阻止缩放
缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。
要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：
content="width=device-width, initial-scale=1.0, user-scalable=no">
看看的文章，了解更多关于视图区设置的信息。
阻止滚动
一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，，但要禁用它很容易。
document.body.addEventListener(‘touchmove’, function(event) {event.preventDefault();}, false);
细心渲染
如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：
canvas.addEventListener(‘touchmove’, function(event) {renderTouches(event.touches);},
不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：
第一个青春是上帝给的;第二个的青春是靠自己努力的
