移動WEB開發之JS內置touch事件[轉]
iOS上的Safari也支持click 和mouseover等傳統的交互事件，只是不推薦在iOS的瀏覽器應用上使用click和mouseover，因為這兩個事件是為了支持鼠標點擊而設計 出來的。Click事件在iOS上會有半秒左右的延遲，原因是iOS要highlight接收到click的element。而 mouseover/out等事件則會被手指的點擊觸發。所以，在iOS上，應當拋棄傳統的交互事件模型而接受一個新的事件模型。Touch事件和更高級 的Gesture事件，能讓你的網頁交互起來像native應用一樣。
處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件：
touchstart: 手指放到屏幕上的時候觸發
touchmove: 手指在屏幕上移動的時候觸發
touchend: 手指從屏幕上拿起的時候觸發
touchcancel: 系統取消touch事件的時候觸發。至於系統什麽時候會取消，不詳。。
Gesture事件則是對touch事件的更高級的封裝，主要處理手指slide、rotate、scale等動作，將在下一篇文章詳述。
在開始描述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：
- .spirit { / * 方塊的class名稱*/
- position: absolute;
- width: 50px;
- height: 50px;
- background-color: red;
- }
然後，在body下定義一個接收事件的容器，這裏body的height必須是100%才能占滿整個viewport：
- <body style=”height: 100%;margin:0;padding:0”>
- <div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div>
- </body>
定義touchstart的事件處理函數，並綁定事件：
- // define global variable
- var canvas = document.getElementByIdx_x_x_x(“canvas”),
- spirit, startX, startY;
- // touch start listener
- 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_x_x_x(“div”);
- spirit.className = “spirit”;
- spirit.style.left = startX;
- spirit.style.top = startY;
- canvas.a(spirit);
- }
- // add touch start listener
- 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對象a到容器中。這樣， 當第一根手指放下的時候，一個紅色的，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;
- spirit.style.webkitTransform = ‘translate(‘ + x + ‘px, ‘ + y + ‘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程序就誕生了。。
這種事件處理模式雖然能夠滿足我們開發多觸式網頁應用的需求，但是start – move – end的流程有點繁瑣，能不能封裝一些常用的動作讓我們用一個event handler就能解決問題呢。沒錯，Gesture事件就是為了這個目的設計出來的，它封裝了手指的scale, slide, rotate等常用的動作。不過，下一章我們再來討論這個問題。。
附件是一個更加復雜一些的例子，每根手指放下的時候都會產生一個不同顏色的方塊，手指動的時候方塊跟著動，手指提起的時候方塊消失，請下載查看試用。
通過附件所包含的實例，我們可以看出一些較為隱蔽的特性。首先，這裏我們沒有再使用event.touches取所有touch的對象，而是使用 event.changedTouches這個數組，用來取得所有跟本次事件相關的touch。但是，這裏我發現一個奇怪的特性，不知道是我的ipad有 問題還是本來就是這樣，就是在有多根手指放在屏幕上的時候，如果提起一根手指，touchend事件的changedTouches中會包含所有手指的 touch對象，然後，其他幾根留在屏幕上的手指會重新觸發touchstart，並刷新所有的touch對象（identifier都不一樣了）。如果 這是一個所有設備都有的特性，那麽將給編程者帶來一些不便，不知道水果為啥要這麽處理。
對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
移動WEB開發之JS內置touch事件[轉]