移动端事件

前言

若是咱们容许用户在页面上用相似桌面浏览器鼠标手势的方式来控制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"> 

看看这篇关于移动HTML 5 的文章，了解更多关于视图区设置的信息。

阻止滚动

一些移动设备有缺省的touchmove行为，好比说经典的iOS overscroll效果，当滚动超出了内容的界限时就引起视图反弹。这种作法在许多多点触控应用中会带来混乱，但要禁用它很容易。

document.body.addEventListener('touchmove', function(event) { 
event.preventDefault(); 
}, false);

细心渲染 

若是你正在编写的多点触控应用涉及了复杂的多指手势的话，要当心地考虑如何响应触摸事件，由于一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出全部触点的例子，你能够在有触摸输入的时候就马上进行绘制：

canvas.addEventListener('touchmove', function(event) { 
renderTouches(event.touches); 
},

不过这一技术并非要随着屏幕上的手指个数的增多而扩充，替代作法是，能够跟踪全部的手指，而后在一个循环中作渲染，这样可得到更好的性能：

var touches = [] 
canvas.addEventListener('touchmove', function(event) { 
touches = event.touches; 
}, false); 

// 设置一个每秒60帧的定时器 
timer = setInterval(function() { 
renderTouches(touches); 
}, 15);

提示 ：setInterval不太适合于动画，由于它没有考虑 到浏览器本身的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工做时间缘由，这是一个更好的选 择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches

要记住的一点是，event.touches是与屏幕接触的全部手指的一个数组，而不只是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

最后一点，由于你是在为移动设备作开发，所以你应该要留心移动的最佳作法，这些在Eric Bidelman的文章 中有论及，以及要了解这一W3C文档 。

设备支持

---

遗憾的是，触摸事件的实如今完备性和质量方面的差异很大。我编写了一个诊断脚原本显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持 的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。

简而言之，全部被测试的浏览器都支持touchstart、touchend和touchmove事件。

规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：

1. touchenter ：移动的手指进入一个DOM元素。
2. toucheleave ：移动手指离开一个DOM元素。
3. touchcancel ：触摸被中断（实现规范）。

被测试的浏览器还在每一个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏 览器没有支持 radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟 触发60次，全部的被测试设备都是这样。

Android 2.3.3 (Nexus)

Android的Gingerbread浏览器（在Nexus One和Nexus S上测试）不支持多点触摸，这是一个已知的问题 。

Android 3.0.1 (Xoom)

Xoom的浏览器对多点触摸有一个基本的支持，不过只能是在单个的DOM元素上起做用。浏览器不能正确响应同时发生在不一样DOM元素上的两处触摸，换句话说，下面的代码会对两个同时发生的触摸的给出反应：

obj1.addEventListener('touchmove', function(event) { 
for (var i = 0; i < event.targetTouches; i++) { 
var touch = event.targetTouches[i]; 
console.log('touched ' + touch.identifier); 
} 
}, false);

但下面的代码则不会：

var objs = [obj1, obj2]; 
for (var i = 0; i < objs.length; i++) { 
var obj = objs[i]; 
obj.addEventListener('touchmove', function(event) { 
if (event.targetTouches.length == 1) { 
console.log('touched ' + event.targetTouches[0].identifier); 
} 
}, false); 
}

iOS 4.x (iPad, iPhone)

iOS设备彻底支持多点触摸，可以跟踪多个手指，并在浏览器中提供一个很是敏感的触摸体验。

开发者工具

---

在移动开发中，一种较为容易的作法是，先在桌面上开始原型设计，而后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，由于大部分的PC都没有触摸输入。

不得不在移动设备上进行的测试有可能会拉长你的开发周期，由于你所作的每项改变都须要提交代码到服务器上，接着再加载到设备上。而后，一旦运行后，对应用也就没有太多的调试了，由于平板电脑和智能手机都很缺少web开发者所用的工具。

这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件能够基于鼠标事件来模拟。若是你有触摸输入设备的话，好比说现代的App MacBook，那么多点触摸也能够被模拟。

单点触摸事件

若是你想在桌面上模拟单点触摸事件的话，试一下Phantom Limb ，该程序在网页上模拟触摸事件并提供一只巨手来引导。

另外还有Touchable 这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件。

多点触摸事件

为了可以让你的多点触摸web应用在你的浏览器或是多点触摸控板（好比说Apple MacBook或是MagicPad）上起做用，我建立了这一个MagicTouch.js填充工具 ，其捕捉来自触控板的触摸事件，而后把它们转换成标准兼容的触摸事件。

1. 下载npTuioClient NPAPI插件 并把它安装到~/Library/Internet Plug-Ins/目录下。

2. 下载这一Mac MagicPad的TongSeng TUIO应用 并启动这一服务器。

3. 下载MagicTouch.js 这一JavaScript库来基于npTuioClient回调模拟规范兼容的触摸事件。

4. 以以下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中：

< head> 
... 
< script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> 
< /head> 

< body> 
... 
< object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> 
Touch input plugin failed to load! 
< /object> 
< /body>

我只在Chrome 10上测试了这一方法，不过只要稍作调整它应该可以在其余的现代浏览器上工做。

若是你的计算机没有多点触摸输入的话，你可使用其余的TUIO跟踪器，好比说reacTIVision 来模拟触摸事件。欲了解更多信息，请参阅TUIO项目页面 。

须要注意的一点是，你的手势能够是和OS层面的多点触摸手势相同的。在OS X上，你能够经过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。

随着多点触摸功能逐渐获得跨移动浏览器的的普遍支持，我很是高兴地看到新的web应用充分利用了这一丰富的API。

转自：http://select.yeeyan.org/view/213582/202991