?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?
