轉載–移動互連網終端的touch事件,touchstart, touchend, touchmove

標籤：

轉載請註明： 轉載自WEB前端開發(www.css119.com)-關注常見的WEB前端開發問題、最新的WEB前端開發技術(webApp開發、移動網站開發)、最好的WEB前端開發工具和最全的WEB前端開發w3cschool手冊

本文連結地址: WEB前端開發(www.css119.com)–移動互連網終端的touch事件,touchstart, touchend, touchmove

諸如智能手機和平板電腦一類的行動裝置通常會有一個電容式觸控螢幕（capacitive touch-sensitive screen），以捕捉使用者的手指所做的互動。隨著移動網路的發展，其能夠支援越來越複雜的應用，web開發人員需要一種方法來處理這些事件。例如，幾乎所 有的快節奏遊戲都需要玩家一次按下多個按鈕，這種方式，在觸控螢幕情況下，意味著多點觸摸。Apple在iOS 2.0中引入了觸摸事件API，Android正迎頭趕上這一事實標準，縮小差距。最近一個W3C工作群組正合力制定這一觸摸事件規範。

iOS上的Safari也支援click 和mouseover等傳統的互動事件，只是不推薦在iOS的瀏覽器應用上使用click和mouseover，因為這兩個事件是為了支援滑鼠點擊而設計 出來的。Click事件在iOS上會有半秒左右的延遲，原因是iOS要highlight接收到click的element。而 mouseover/out等事件則會被手指的點擊觸發。所以，在iOS上，應當拋棄傳統的互動事件模型而接受一個新的事件模型。Touch事件和更進階 的Gesture事件，能讓你的網頁互動起來像native應用一樣。

三種在規範中列出並獲得跨行動裝置廣泛實現的基本觸摸事件：

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 ：畫出大約相當於手指形狀的橢圓形。

在開始描述touch事件之前，需要先描述一下多觸式系統中特有的touch對象（android和iOS乃至nokia最新的meego系統都類比了類 似的對象，這裡只針對iOS，因為我只有iPad可用於測試。。）。這個對象封裝一次螢幕觸摸，一般來自於手指。它在touch事件觸發的時候產生，可以 通過touch event handler的event對象取到（一般是通過event.changedTouches屬性）。這個對象包括一些重要的屬性：

client / clientY：觸摸點相對於瀏覽器視窗viewport的位置

pageX / pageY：觸摸點相對於頁面的位置

screenX /screenY：觸摸點相對於螢幕的位置

identifier： touch對象的unique ID

我們從一個單根手指觸摸的執行個體開始進入多觸式網頁的世界。當一根手指放下的時候，螢幕上出現一個方塊，手指移動方塊也隨著移動，手指提起方塊消失。首先，讓我們定義一下方塊的css：

*{margin:0;padding:0}html,body{height:100%}.spirit{position:absolute;width:50px;height:50px;background-color:red;}#canvas{position:relative;width:100%;height:200px;background-color:#ccc}

然後，在body下定義一個接收事件的容器：

<div id="canvas"></div>

定義touchstart的事件處理函數，並綁定事件：

var canvas = document.getElementById("canvas"),    spirit,    startX,    startY;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");    canvas.appendChild(spirit);    spirit.className = "spirit";    spirit.style.left = startX + "px";    spirit.style.top = startY + "px";}canvas.addEventListener("touchstart", touchStart, false);

首先，我們將方塊spirit作為一個全域對象，因為我們現在要測試單根手指所以螢幕上最好只有一個物體在移動（等會有多觸執行個體）。在touchStart這個事件處理函數中，我們也首先判斷了是否已經產生了spirit，也就是是否已經有一個手指放到螢幕上，如果是，直接返回。

和傳統的event listener一樣，多觸式系統也會產生一個event對象，只不過這個對象要多出一些屬性，比如這裡的event.touches，這個數組對象獲得螢幕上所有的touch。注意這裡的event.preventDefault()，在傳統的事件處理函數中，這個方法阻止事件的預設動作，觸摸事件的預設動作是滾屏，我們不想螢幕動來動去的，所以先調用一下這個函數。我們取第一個touch，將其pageX/Y作為spirit建立時的初始位置。接下來，我們建立一個div，並且設定className，left，top三個屬性。最後，我們把spirit對象appendChild到容器中。這樣，當第一根手指放下的時候，一個紅色的，50px見方的方塊就放到螢幕上了。

然後，我們要開始處理手指在螢幕上移動的事件：

function touchMove(event) {    event.preventDefault();    if (!spirit || !event.touches.length) return;    var touch = event.touches[0],        x = touch.pageX - startX,        y = touch.pageY - startY;    //這裡是為了手指一定是橫向滾動的,原理是計算X位置的位移要比Y的位移大    if (Math.abs(x) > Math.abs(y)) {        spirit.style.left = touch.pageX + "px";        spirit.style.top = touch.pageY + "px";    }}canvas.addEventListener("touchmove", touchMove, false);

在touch move listener中，我們使用webkit特有的css屬性：webkitTransform來移動方塊，這個屬性具體怎麼用請google之。建議構造面向iOS裝置的網頁的時候盡量使用webkit自己的特性，不但炫，更可以直接利用硬體來提高效能。

最後，我們處理touchend事件。手指提起的時候方塊從螢幕上移除。

function touchEnd(event) {    if (!spirit) return;    canvas.removeChild(spirit);    spirit = null;}canvas.addEventListener("touchend", touchEnd, false);

在你的ipad或者iphone上測試一下以上代碼。如果不出意外的話，一個完整的多觸式web程式就誕生了。。
裝置支援
遺憾的是，觸摸事件的實現在完備性和品質方面的差別很大。我編寫了一個診斷指令碼來顯示一些關於觸摸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次，所有的被測試裝置都是這樣。
開發人員工具
在移動開發中，一種較為容易的做法是，先在案頭上開始原型設計，然後再在打算要支援的裝置上處理移動特有的部分。多點觸摸正是難以在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回調類比規範相容的觸摸事件。

對touch event的介紹我們點到為止，這裡給大家推薦兩篇文檔：

Safari dom additions reference: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariJSRef/Intro/Intro.html#//apple_ref/doc/uid/TP40001482-CH2g-BAJDAJAG

Safari web content guide:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/Introduction/Introduction.html

對於有志於開發多觸式網頁應用的程式員來說，apple的developer網站是一個應該經常光顧的地方。

我做的一個簡單的例子：
http://www.css119.com/demo/touchmove.html

轉載請註明： 轉載自WEB前端開發(www.css119.com)-關注常見的WEB前端開發問題、最新的WEB前端開發技術(webApp開發、移動網站開發)、最好的WEB前端開發工具和最全的WEB前端開發w3cschool手冊

本文連結地址: WEB前端開發(www.css119.com)–移動互連網終端的touch事件,touchstart, touchend, touchmove

轉載–移動互連網終端的touch事件,touchstart, touchend, touchmove