一、觸摸事件
- touchstart：當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
- touchmove：當手指在屏幕上滑動時連續地觸發。在這個世界發生期間，調用preventDefault()可以阻止滾動。
- touchend：當手指在屏幕上移開時觸發。
- touchcancel：當系統停止跟蹤觸摸時觸發。關於此事件的確切觸發時間，文檔中沒有明確說明。
上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規范中定義，但它們卻是以兼容DOM的方式實現的。因此，每個觸摸事件的event對象都提供了鼠標事件中常見的屬性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。
除了常見的DOM屬性外，觸摸世界還包含下列三個用於跟蹤觸摸的屬性。
- touches:表示當前跟蹤的觸摸操作的Touch對象的數組。
- targetTouches:特定於事件目標的Touch對象的數組。
- changedTouches:表示字上次觸摸以來發生了什么改變的Touch對象的數組。
每個Touch對象包含下列屬性：
- clientX:觸摸目標在視口中的x坐標。
- clientY：觸摸目標在視口中的y坐標。
- identifier:標識觸摸的唯一ID。
- pageX：觸摸目標在頁面中的x坐標。
- pageY：觸摸目標在頁面中的y坐標。
- screenX：觸摸目標在屏幕中的x坐標。
- screenY：觸摸目標在屏幕中的y坐標。
- target：觸摸的DOM節點目標。
使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。
<div id="output"></div>
function handlerTouchEvent(event){ //只跟蹤一次觸摸 if(event.touches.length==1 || event.touches.length==0){//書上這里有錯 var output=document.getElementById("output"); switch(event.type){ case "touchstart": output.innerHTML="Touch started ( "+event.touches[0].clientX+", "+event.touches[0].clientY+")"; break; case "touchend": output.innerHTML+="<br/>Touch ended ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")"; break; case "touchmove": event.preventDefault(); //阻止滾動 output.innerHTML+="<br/>Touch moved ("+event.changedTouches[0].clientX+", "+event.changedTouches[0].clientY+")"; } } } EventUtil.addHandler(document,"touchstart",handlerTouchEvent); EventUtil.addHandler(document,"touchend",handlerTouchEvent); EventUtil.addHandler(document,"touchmove",handlerTouchEvent);
以上代碼會跟蹤屏幕上發生的一次觸摸操作。為簡單起見，只會在有一次活動觸摸操作的情況下輸出信息。
當touchstart事件發生時，會將觸摸的位置信息輸出到<div>元素中。
當touchmove事件發生時，會取消其默認行為，阻止滾動（觸摸移動的默認行為是滾動頁面），然后輸出觸摸操作的變化信息。
而touched事件則會輸出有關觸摸操作的最終信息。
注意：在touched事件發生時，touches集合中就沒有任何Touch對象了，因為不存在活動的觸摸操作；此時，就必須轉而使用changedTouches集合。
/*當觸發touchstart和touchmove事件的時候沒有問題，程序能正確的進入 if 然后根據case執行對應的語句，但是當觸發touchend事件的時候，event.touches.length已經等於0了，不能再進入if 中，也就不能執行case中的語句，所以觸發touchend的時候永遠不會執行程序。所以判斷條件要加上 event.touches.length==0.*/
這些事件會在文檔的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素時，這些事件（包括鼠標事件） 發生的順序如下：
- touchstart
- mouseover
- mousemove（一次）
- mousedown
- mouseup
- click
- touched
桌面版Firefox 6+和Chrome也支持觸摸事件。
2、手勢事件
當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，如下：
- gesturestart:當一個手指已經按在屏幕上而另一個手指又觸摸屏幕時觸發。
- gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
- gestureend:當任何一個手指從屏幕上移開時觸發。
只有兩個手指都觸摸到事件的接收容器時才會觸發這些事件。
在一個元素上設置事件處理程序，意味着兩個手指必須同時位於該元素的范圍之內，才能觸發手勢事件（這個元素就是目標）。
由於這些事件冒泡，所以講事件處理程序放在文檔上也可以處理所有手勢事件。
此時，事件的目標就算兩個手指都位於其范圍內的那個元素。
觸摸事件和手勢事件關系：
每個手勢事件的event對象都包含着標准的鼠標事件屬性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。此外還有兩個額外的屬性：rotation和scale。
- rotation屬性：表示手指變化引起的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從0開始）。
- scale屬性：表示兩個手指間距離的變化情況（例如向內收縮會縮短距離）；這個值從1開始，並隨距離拉大而增長，隨距離縮短而減小。
例子：
function handleGestureEvent(event){ var output=document.getElementById("output"); switch(event.type){ case "gesturestart": output.innerHTML="Gesture started ( "+event.ratation+", scale"+event.scale+")"; break; case "gestureend": output.innerHTML+="<br/>Gesture ended ("+event.rotation+", scale"+event.scale+")"; break; case "gesturechange": event.preventDefault(); //阻止滾動 output.innerHTML+="<br/>Gesture changed ("+event.rotation+",scale "+event.scale+")"; } } EventUtil.addHandler(document,"gesturestart",handleGestureEvent); EventUtil.addHandler(document,"gestureend",handleGestureEvent); EventUtil.addHandler(document,"gesturechange",handleGestureEvent);
擴展閱讀：
javaScript事件（四）event的公共成員（屬性和方法）
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/6560807.html有問題歡迎與我討論，共同進步。