前言

如果我們允許用戶在頁面上用類似桌面瀏覽器鼠標手勢的方式來控制WEB APP，這個頁面上肯定是有很多可點擊區(qū)域的，如果用戶觸摸到了那些可點擊區(qū)域怎么辦呢??
諸如智能手機和平板電腦一類的移動設備通常會有一個電容式觸摸屏（capacitive touch-sensitive screen），以捕捉用戶的手指所做的交互。隨著移動網絡的發(fā)展，其能夠支持越來越復雜的應用，web開發(fā)者需要一種方法來處理這些事件。例如，幾乎所 有的快節(jié)奏游戲都需要玩家一次按下多個按鈕，這種方式，在觸摸屏情況下，意味著多點觸摸。
Apple在iOS?2.0中引入了觸摸事件API，Android正迎頭趕上這一事實標準，縮小差距。最近一個W3C工作組正合力制定這一觸摸事件規(guī)范。
在本文中，我會深入研究iOS和Android設備提供的觸摸事件API，探索一下可以構建哪些類型的應用，給出一些最佳做法，并論及一些使得可觸控應用（touch-enabled application）的開發(fā)變得更加容易的有用技術。

觸摸事件

---

三種在規(guī)范中列出并獲得跨移動設備廣泛實現(xiàn)的基本觸摸事件：

1.?touchstart?：手指放在一個DOM元素上。
2.?touchmove?：手指拖曳一個DOM元素。
3.?touchend?：手指從一個DOM元素上移開。

每個觸摸事件都包括了三個觸摸列表：

1.?touches?：當前位于屏幕上的所有手指的一個列表。
2.?targetTouches?：位于當前DOM元素上的手指的一個列表。
3.?changedTouches?：涉及當前事件的手指的一個列表。

例如，在一個touchend事件中，這就會是移開的手指。

這些列表由包含了觸摸信息的對象組成：

1.?identifier?：一個數(shù)值，唯一標識觸摸會話（touch session）中的當前手指。
2.?target?：DOM元素，是動作所針對的目標。
3.?客戶/頁面/屏幕坐標?：動作在屏幕上發(fā)生的位置。
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和其他人實現(xiàn)的基于畫布的繪畫演示?。

還有Browser Ninja?，一個技術演示?，?是一個使用了CSS3的轉換、過渡和畫布的Fruit Ninja克隆。

最佳做法

---

阻止縮放

缺省的多點觸摸設置不是特別的好用，因為你的滑動和手勢往往與瀏覽器的行為有關聯(lián)，比如說滾動和縮放。

要禁用縮放功能的話，使用下面的元標記設置你的視圖區(qū)（viewport），這樣其對于用戶來說就是不可伸縮的了：

content="width=device-width, initial-scale=1.0, user-scalable=no">?

看看這篇關于移動HTML 5?的文章，了解更多關于視圖區(qū)設置的信息。

阻止?jié)L動

一些移動設備有缺省的touchmove行為，比如說經典的iOS overscroll效果，當滾動超出了內容的界限時就引發(fā)視圖反彈。這種做法在許多多點觸控應用中會帶來混亂，但要禁用它很容易。

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

細心渲染?

如果你正在編寫的多點觸控應用涉及了復雜的多指手勢的話，要小心地考慮如何響應觸摸事件，因為一次要處理這么多的事情。考慮一下前面一節(jié)中的在屏幕上畫出所有觸點的例子，你可以在有觸摸輸入的時候就立刻進行繪制：

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

不過這一技術并不是要隨著屏幕上的手指個數(shù)的增多而擴充，替代做法是，可以跟蹤所有的手指，然后在一個循環(huán)中做渲染，這樣可獲得更好的性能：

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

// 設置一個每秒60幀的定時器?
timer = setInterval(function() {?
renderTouches(touches);?
}, 15);

提示?：setInterval不太適合于動畫，因為它沒有考慮 到瀏覽器自己的渲染循環(huán)。現(xiàn)代的桌面瀏覽器提供了requestAnimationFrame這一函數(shù)，基于性能和電池工作時間原因，這是一個更好的選 擇。一但瀏覽器提供了對該函數(shù)的支持，那將是首選的處理事情的方式。

使用targetTouches和changedTouches

要記住的一點是，event.touches是與屏幕接觸的所有手指的一個數(shù)組，而不僅是位于目標DOM元素上的那些。你可能會發(fā)現(xiàn)使用 event.targetTouches和event.changedTouches來代替event.touches更有用一些。

最后一點，因為你是在為移動設備做開發(fā)，因此你應該要留心移動的最佳做法，這些在Eric Bidelman的文章?中有論及，以及要了解這一W3C文檔?。

設備支持

---

遺憾的是，觸摸事件的實現(xiàn)在完備性和質量方面的差別很大。我編寫了一個診斷腳本來顯示一些關于觸摸API實現(xiàn)的基本信息，其中包括哪些事件是支持 的，以及 touchmove事件觸發(fā)的解決方案。我在Nexus One和Nexus S硬件上測試了Android 2.3.3，在Xoom上測試了Android 3.0.1，以及在iPad和iPhone上測試了iOS 4.2。

簡而言之，所有被測試的瀏覽器都支持touchstart、touchend和touchmove事件。

規(guī)范提供了額外的三個觸摸事件，但被測試的瀏覽器沒有支持它們：

1.?touchenter?：移動的手指進入一個DOM元素。
2.?toucheleave?：移動手指離開一個DOM元素。
3.?touchcancel?：觸摸被中斷（實現(xiàn)規(guī)范）。

被測試的瀏覽器還在每個觸摸列表內部都提供了touches、targetTouches和changedTouches列表。不過，被測試的瀏 覽器沒有支持 radiusX、radiusY或是rotationAngle屬性，這些屬性指明觸摸屏幕的手指的形狀。在一次touchmove期間，事件大約一秒鐘 觸發(fā)60次，所有的被測試設備都是這樣。

Android 2.3.3 (Nexus)

Android的Gingerbread瀏覽器（在Nexus One和Nexus S上測試）不支持多點觸摸，這是一個已知的問題?。

Android 3.0.1 (Xoom)

Xoom的瀏覽器對多點觸摸有一個基本的支持，不過只能是在單個的DOM元素上起作用。瀏覽器不能正確響應同時發(fā)生在不同DOM元素上的兩處觸摸，換句話說，下面的代碼會對兩個同時發(fā)生的觸摸的給出反應：

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設備完全支持多點觸摸，能夠跟蹤多個手指，并在瀏覽器中提供一個非常敏感的觸摸體驗。

開發(fā)者工具

---

在移動開發(fā)中，一種較為容易的做法是，先在桌面上開始原型設計，然后再在打算要支持的設備上處理移動特有的部分。多點觸摸正是難以在PC上進行測試的那些功能之一，因為大部分的PC都沒有觸摸輸入。

不得不在移動設備上進行的測試有可能會拉長你的開發(fā)周期，因為你所做的每項改變都需要提交代碼到服務器上，接著再加載到設備上。然后，一旦運行后，對應用也就沒有太多的調試了，因為平板電腦和智能手機都很缺乏web開發(fā)者所用的工具。

這個問題的一個解決方案是在開發(fā)機器上模擬觸發(fā)事件。對于單點觸摸，觸摸事件可以基于鼠標事件來模擬。如果你有觸摸輸入設備的話，比如說現(xiàn)代的App MacBook，那么多點觸摸也可以被模擬。

單點觸摸事件

如果你想在桌面上模擬單點觸摸事件的話，試一下Phantom Limb?，該程序在網頁上模擬觸摸事件并提供一只巨手來引導。

另外還有Touchable?這一jQuery插件，該插件跨平臺地統(tǒng)一了觸摸和鼠標事件。

多點觸摸事件

為了能夠讓你的多點觸摸web應用在你的瀏覽器或是多點觸摸控板（比如說Apple MacBook或是MagicPad）上起作用，我創(chuàng)建了這一個MagicTouch.js填充工具?，其捕捉來自觸控板的觸摸事件，然后把它們轉換成標準兼容的觸摸事件。

1. 下載npTuioClient NPAPI插件?并把它安裝到~/Library/Internet Plug-Ins/目錄下。

2. 下載這一Mac MagicPad的TongSeng TUIO應用?并啟動這一服務器。

3. 下載MagicTouch.js?這一JavaScript庫來基于npTuioClient回調模擬規(guī)范兼容的觸摸事件。

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上測試了這一方法，不過只要稍做調整它應該能夠在其他的現(xiàn)代瀏覽器上工作。

如果你的計算機沒有多點觸摸輸入的話，你可以使用其他的TUIO跟蹤器，比如說reacTIVision?來模擬觸摸事件。欲了解更多信息，請參閱TUIO項目頁面?。

需要注意的一點是，你的手勢可以是和OS層面的多點觸摸手勢相同的。在OS X上，你可以通過進入System Preferences中的Trackpad偏好設定版面來配置系統(tǒng)范圍的事件。

總結

以上是生活随笔為你收集整理的html 5 触摸屏事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。