前言
如果我們允許用戶在頁面上用類似桌面瀏覽器鼠標手勢的方式來控制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。
