以下是幾種普及得比較好的觸摸事件，可以在絕大多數現代瀏覽器中來測試這一事件（必須是觸屏設備）： (on)touchstart：觸摸開始的時候觸發 (on)touchmove：手指在屏幕上滑動的時候觸發 (on)touchend：觸摸結束的時候觸發 (on)touchcancel：系統取消touch事件的時候觸發。例如電話接入或者彈出信息。一般用在游戲：玩着的時候，突然來電話了，就觸發touchcancel事件暫停游戲、存檔等操作。
而每個觸摸事件都包括了三個觸摸對象列表，每個列表里包含了對應的一系列觸摸點（觸摸對象，用來實現多點觸控）： touches：當前位於屏幕上的所有手指的列表。 targetTouches：位於當前DOM元素上手指的列表。 changedTouches：涉及當前事件手指的列表。
每個觸摸點由包含了如下觸摸信息（常用）： identifier：一個數值，touch對象的unique ID ，唯一標識觸摸會話（touch session）中的當前手指。一般為從0開始的流水號（android4.1，uc） target：DOM元素，是動作所針對的目標。 client / clientY：觸摸點相對於瀏覽器窗口viewport的位置，不包含滾動距離 pageX / pageY：觸摸點相對於頁面的位置，包含滾動距離 screenX /screenY：觸摸點相對於屏幕的位置 radiusX/radiusY/rotationAngle：畫出大約相當於手指形狀的橢圓形，分別為橢圓形的兩個半徑和旋轉角度。初步測試瀏覽器不支持，好在功能不常用。 有了這些信息，就可以依據這些事件信息為用戶提供不同的反饋了。
Touch事件與Mouse事件的出發關系 在觸屏操作后，手指提起的一剎那（即發生touchend后），系統會判斷接收到事件的element的內容是否被改變， 如果內容被改變，會解析為touch事件，接下來的click事件都不會觸發， 如果內容沒有改變，則會解析為click事件，按照mousedown，mouseup，click的順序觸發事件。 特別需要提到的是，在解析為click事件時，只有再觸發一個觸屏事件時，才會觸發上一個事件的mouseout事件。 因此有關於hover的小技巧，當點擊過一個按鈕之后，這個按鈕就會一直處於hover的狀態，此時基於這個偽類所設置的css也是起作用的，直到用手指點擊另外一個地方，才會完成mouseout事件。
gesture事件（手勢事件） 與touch事件相近，也用得很多的是gesture事件，這個事件將在下一篇講到。
touch事件demo
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<div id="canvas"> <div id="move"></div> </div>
<style>
*{margin:0;padding:0;}
html,body{ width:100%;height:100%;}
#canvas{position:relative;width:100%;height:100%;}
#move{position:absolute;width:100px;height:100px;background:#0F0;}
.spirit {position:absolute;width:50px;height:50px;background-color:red;}
</style>
<script>
var canvas = document.getElementById("canvas");
var spirit, startX, startY;
var a = 1;
// 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("div");
spirit.className = "spirit";
spirit.style.left = startX - 50 + "px";
spirit.style.top = startY - 50 + "px";
canvas.appendChild(spirit);
spirit.innerHTML = a++;
}
// touch move listener
function touchMove(event) {
event.preventDefault();
if (!spirit || !event.touches.length) return;
var touch = event.touches[0];
//spirit.style.left = touch.pageX - 50 + "px";
//spirit.style.top = touch.pageY - 50 + "px";
//或者用下面的
var x = touch.pageX - startX;
var y = touch.pageY - startY;
spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
}
// touch end listener
function touchEnd(event) {
if (!spirit) return;
canvas.removeChild(spirit);
spirit = null;
}
// add touch start listener
canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);
</script>