觸摸事件中touchstar、touchmove、touchend、touchcancel事件應用方法及實例
iOS版 Safari為了向開發人員傳達一些特殊信息，新增了一些專有事件。因為 iOS設備既沒有鼠標 也沒有鍵盤，所以在為移動 Safari開發交互性網頁時，常規的鼠標和鍵盤事件根本不夠用。隨着 Android 中的 WebKit 的加入，很多這樣的專有事件變成了事實標准，導致 W3C開始制定 Touch Events規范（參 見 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html）。以下介紹的事件只針對觸摸設備。
觸摸事件包含 iOS 2.0軟件的 iPhone 3G發布時，也包含了一個新版本的 Safari瀏覽器。這款新的移動 Safari 提供了一些與觸摸（touch）操作相關的新事件。后來，Android上的瀏覽器也實現了相同的事件。觸摸 事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來說，有以下幾個觸 摸事件。
touchstart：當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
touchmove：當手指在屏幕上滑動時連續地觸發。在這個事件發生期間，調用preventDefault() 可以阻止滾動。
touchend：當手指從屏幕上移開時觸發。
touchcancel：當系統停止跟蹤觸摸時觸發。關於此事件的確切觸發時間，文檔中沒有明確說明。
上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在 DOM規范中定義，但它們卻 是以兼容 DOM的方式實現的。因此，每個觸摸事件的 event 對象都提供了在鼠標事件中常見的屬性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。
除了常見的 DOM屬性外，觸摸事件還包含下列三個用於跟蹤觸摸的屬性。
touches：表示當前跟蹤的觸摸操作的 Touch 對象的數組。
targetTouchs：特定於事件目標的 Touch 對象的數組。
changeTouches：表示自上次觸摸以來發生了什么改變的 Touch 對象的數組。 每個 Touch 對象包含下列屬性。
clientX：觸摸目標在視口中的 x坐標。
clientY：觸摸目標在視口中的 y坐標。
identifier：標識觸摸的唯一 ID。
pageX：觸摸目標在頁面中的 x坐標。
pageY：觸摸目標在頁面中的 y坐標。
screenX：觸摸目標在屏幕中的 x坐標。
screenY：觸摸目標在屏幕中的 y坐標。
target：觸摸的 DOM節點目標。 使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。來看下面的例子。
<!DOCTYPE html>
<html>
<head>
<title>Touch Events Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<p>Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.</p>
<div id="output">
</div>
<script type="text/javascript">
function handleTouchEvent(event){
//只跟蹤一次觸摸
if (event.touches.length == 1){
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(); //prevent scrolling
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
</script>
</body>
</html>
以上代碼會跟蹤屏幕上發生的一次觸摸操作。為簡單起見，只會在有一次活動觸摸操作的情況下輸 出信息。當 touchstart 事件發生時，會將觸摸的位置信息輸出到<div>元素中。當 touchmove 事件 發生時，會取消其默認行為，阻止滾動（觸摸移動的默認行為是滾動頁面），然后輸出觸摸操作的變化 信息。而 touchend 事件則會輸出有關觸摸操作的終信息。注意，在 touchend 事件發生時，touches 集合中就沒有任何 Touch 對象了，因為不存在活動的觸摸操作；此時，就必須轉而使用 changeTouchs 集合。
這些事件會在文檔的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素 時，這些事件（包括鼠標事件）發生的順序如下：
(1)touchstart
(2) mouseover
(3) mousemove（一次）
(4) mousedown
(5) mouseup
(6) click
(7) touchend
支持觸摸事件的瀏覽器包括 iOS版 Safari、Android版 WebKit、bada版 Dolfin、OS6+中的 BlackBerry WebKit、Opera Mobile 10.1+和 LG專有 OS中的 Phantom瀏覽器。目前只有 iOS版 Safari支持多點觸摸。 桌面版 Firefox 6+和 Chrome也支持觸摸事件。
以下是四種touch事件
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用
每個觸摸事件被觸發后，會生成一個event對象，event對象里額外包括以下三個觸摸列表
touches: //當前屏幕上所有手指的列表
targetTouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表里的每次觸摸由touch對象組成，touch對象里包含着觸摸信息，主要屬性如下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對於頁面的位置
screenX / screenY: //觸摸點相對於屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素
注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
通過meta元標簽來設置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滾動
preventDefault是阻止默認行為，touch事件的默認行為就是滾動。
event.preventDefault();
案例：
下面給出一個案例，需在移動設備上才能看出效果。
1.定義touchstart的事件處理函數，並綁定事件：
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false);
//定義touchstart的事件處理函數
start:function(event){
var touch = event.targetTouches[0]; //touches數組對象獲得屏幕上所有的touch，取第一個touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一個touch的坐標值
isScrolling = 0; //這個參數判斷是垂直滾動還是水平滾動
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},
觸發touchstart事件后，會產生一個event對象，event對象里包括觸摸列表，獲得屏幕上的第一個touch,並記下其pageX,pageY的坐標。定義一個變量標記滾動的方向。此時綁定touchmove,touchend事件。
2.定義手指在屏幕上移動的事件，定義touchmove函數。
//移動
move:function(event){
//當屏幕有多個touch或者頁面被縮放過，就不執行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling為1時，表示縱向滑動，0為橫向滑動
if(isScrolling === 0){
event.preventDefault(); //阻止觸摸事件的默認行為，即阻止滾屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
},
同樣首先阻止頁面的滾屏行為，touchmove觸發后，會生成一個event對象，在event對象中獲取touches觸屏列表，取得第一個touch,並記下pageX,pageY的坐標，算出差值，得出手指滑動的偏移量，使當前DOM元素滑動。
3.定義手指從屏幕上拿起的事件，定義touchend函數。
//滑動釋放
end:function(event){
var duration = +new Date - startPos.time; //滑動的持續時間
if(isScrolling === 0){ //當為水平滾動時
this.icon[this.index].className = '';
if(Number(duration) > 10){
//判斷是左移還是右移，當偏移量大於10時執行
if(endPos.x > 10){
if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){
if(this.index !== this.icon.length-1) this.index += 1;
}
}
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
}
//解綁事件
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
},
手指離開屏幕后，所執行的函數。這里先判斷手指停留屏幕上的時間，如果時間太短，則不執行該函數。再判斷手指是左滑動還是右滑動，分別執行不同的操作。最后很重要的一點是移除touchmove,touchend綁定事件。