之前在寫網頁小遊戲的時候，考慮了當使用者在移動端裝置上玩遊戲的情況，所以接觸到了移動端的觸碰事件，下面總結一些經驗給大家參考，如有問題，敬請指正。

關於觸控事件，w3c有相應的標準，可以參考https://www.w3.org/TR/touch-events/

下面介紹幾種普遍使用的觸控事件：

1、touchstart

w3c的標準是這樣解釋的：when the user places a touch point on the touch surface.也就是當用戶手指觸控式螢幕幕的瞬間觸發，其實從單詞角度也非常容易理解就是觸控開始時觸發。

2、touchend

相對於touchstart，touchend就是在觸控結束時觸發。

w3c的描述是這樣的： when the user removes a touch point from the touch surface, also including cases where the touch point physically leaves the touch surface, such as being dragged off of the screen.

w3c的描述中提到兩種情況可認為是觸發了觸控結束事件：

(1)當用戶將手指擡起，使用者的手指離開裝置螢幕

(2)當觸控點到了使用者螢幕以外也就是當用戶手指從螢幕上一直移動，直到移出了螢幕邊緣

3、touchmove

使用者移動手指的過程中連續觸發，w3c定義：when the user moves a touch point along the touch surface，當用戶沿著觸控面移動觸控點時觸發。

4、touchcancel
就是取消觸控事件，當有更高級別的事件發生時觸發，比如有電話打進來，但是不同瀏覽器會有不同的含義。

其他事件

touchenter、touchleave

規範中曾經包含這兩個事件，但現在沒有了，這兩個事件是在使用者手指移入或移出某個元素時觸發，但是大多數情況這兩個事件並沒有被實現。IE瀏覽器支援這兩個事件。

每個觸控事件都包含三個列表，每個列表裡包含了對應的觸控點：

(1)touches：包含了當前位於螢幕上的所有觸控點

(2)targetTouches：包含了當前位於DOM元素上的所有觸控點

(3)changedTouches：包含了關聯當前事件的觸控點

而且每個觸控點又包含了以下屬性：

(1)identifier：當前觸控點的編號，唯一的

(2)target：手指所觸控的DOM元素

(3)pageX：相對於頁面的x座標

(4)pageY：相對於頁面的y座標

(5)clientX：相對於視區的x座標，也就是當事件被觸發時滑鼠指標相對於瀏覽器頁面的水平座標

(6)clientY：相對於視區的y座標，也就是當事件被觸發時滑鼠指標相對於瀏覽器頁面的垂直座標

(7)screenX：相對於螢幕的x座標

(8)screenY：相對於螢幕的y座標

要注意的是，裝置上的座標系不同於數學中的座標系：

螢幕座標系的原點在螢幕的最左上方，向右方向為x軸的正方向，向下方向為y軸的正方向

這些觸控事件的使用的示例程式碼：

document.addEventListener('touchstart',function(event){
    var startx = event.touches[0].pageX;
    var starty = event.touches[0].pageY;
    
});
document.addEventListener('touchend',function(event){
    var endx = event.changedTouches[0].pageX;
    var endy = event.changedTouches[0].pageY;
}
document.addEventListener('touchmove',function(event){
	event.preventDefault();//阻止預設行為的發生
});

支援觸控事件的瀏覽器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG專有OS中的phantom瀏覽器。目前只有IOS版Safari支援多點觸屏。桌面版Firefox 6+和Chrome也支援觸控事件。