一：touch事件分類？
1. touchstart：當手指觸摸屏幕時觸發。不管有多少個手指放在了屏幕上，只要再觸摸一下屏幕就會觸發。在此，我用小米的google瀏覽器做了一個實驗，添加一個計數器，用來查看屏幕上手指觸摸的次數，代碼如下：
window.onload = function(){
var i = 0;
document.addEventListener('touchstart',function(event){
myDiv.innerHTML = '觸屏的次數：'+ i++;
},false)
}2.touchmove：當手指在屏幕上滑動的時候觸發該是事件，在這期間可以通過event.preventDefault()來阻止滾動；
3.touchend：手指從屏幕中移開的時候觸發；
4.touchcancel：當系統停止跟蹤觸摸時觸發。（不做說明）
例如我們在手機屏幕上利用前面三個事件來獲取手指的位置，壓力，接觸面的值：效果如下：
html和css代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1 ">
<title>Document</title>
<style>
#myDiv{width:200px;height:200px;margin: 0 auto;}
#myDiv2{width:40px;height: 40px;border-radius: 20px; background-color:deeppink;position: absolute;top:0;left:0;z-index:0}
</style>
</head>
<body>
<div id="myDivStart">Touch start(0, 0)</div>
<div id="myDivmove">Touch move(0, 0)</div>
<div id="myDivend">Touch end(0, 0)</div>
<div id="myradius">Touch radius(0, 0)</div>
<div id="force">Touch force：</div>
<div id="rotateAngle">Touch rotationAngle：</div>
<div id="myDiv2"></div>
</body>
</html>js代碼：
function touchEvent(event){
event = event || window.event;
var mydiv2 = document.getElementById('myDiv2');
var myDivStart = document.getElementById('myDivStart');
var myDivmove = document.getElementById('myDivmove');
var myDivend = document.getElementById('myDivend');
var myradius = document.getElementById('myradius');
var force = document.getElementById('force');
var rotationAngle = document.getElementById('rotateAngle');
var coordinateX = event.changedTouches[0].clientX;
var coordinateY = event.changedTouches[0].clientY;
mydiv2.style.left = parseFloat(coordinateX)-20 + 'px';
mydiv2.style.top = parseFloat(coordinateY)-20 + 'px';
myradius.innerHTML = "Touch radius：(" + event.changedTouches[0].radiusX.toFixed(2) + ' ,' + event.changedTouches[0].radiusY.toFixed(2) + ")";
rotationAngle.innerHTML = "Touch rotationAngle：" + event.changedTouches[0].rotationAngle;
force.innerHTML = "Touch force：" + event.changedTouches[0].force.toFixed(3);
var intX = parseInt(coordinateX);
var intY = parseInt(coordinateY);
switch(event.type){
case "touchstart" :
myDivStart.innerHTML = "Touch started：(" + event.touches[0].clientX.toFixed(2) + ' ,' + event.touches[0].clientY.toFixed(2) + ")";
console.log(event);
break;
case "touchmove" :
event.preventDefault();// 阻止滾動
myDivmove.innerHTML = "Touch moved：(" + intX + ' ,' + intY + ")";
console.log(event);
break;
case "touchend" :
myDivend.innerHTML = "Touch end：(" + intX + ' ,' + intY + ")";
console.log(event);
myradius.innerHTML = "Touch radius：(0.00,0.00)"
force.innerHTML = "Touch force：0.00" ;
break;
}
}
document.addEventListener("touchstart",touchEvent,false);
document.addEventListener("touchmove",touchEvent,false);
document.addEventListener("touchend",touchEvent,false);二：touch事件對應的event對象有哪些？
根據上面的代碼，可以得到，當觸發touch事件的時候，會生成一個TouchEvent對象，如下圖：
常見的有上面劃線三種屬性，在做一些效果的時候，也是用以下的三個屬性中的touchList對象來確定元素的所有信息。
1.touches：表示當前跟蹤的觸摸操作的touch對象的屬性；
2.targetTouches：表示特定事件目標的Touch對象的數組。
3.changeTouches：表示從上一次觸摸以來，發生了改變的touch對象的數組。
以上這些屬性都是一個包含名爲TouchList的對象，當觸發點爲1(即：event.touches.length ===event.targetTouches.lengh ===event.changeTouches.length)的時候，它們包含觸摸點的所有信息,但是這時候雖然包含信息一樣，但是執行(event.targetTouches == event.touches)返回值爲false，那就是說，裏面肯定有一些地方不相同，暫時還沒有找到，如下圖所示：
下面是一些被觸摸位置的一些重要屬性：
- clientX和clientY屬性：相對於視口的座標；
- identifier：標識觸摸的唯一id；
- pageX和pageY：相對於頁面的座標；
- screenX和screenY：相對於屏幕的座標；
- radiusX和radiusY：能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑和垂直軸(Y軸)半徑；
- rotationAngle ：這個屬性和 Touch.radiusX , Touch.radiusY一起, 描述了用戶和觸摸平面的接觸面.
- force：返回這個 Touch 對象對應的手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數.
- target：觸摸的DOM節點目標。
注意：在touchend事件發生時，touches屬性和targetTouches屬性中的touchList對象就沒有任何東西了，所以，這時候要想取得觸發點的信息，就必須使用changeTouches屬性。
三：touch、mouse和click事件觸發順序？
touch事件和click事件觸發順序：
1.touchstart事件；
2.mouseover事件；
3.mousemove事件(一次)；
4.mousedown事件；
5.mouseup事件；
6.click事件；
7.touchend事件。
兼容性：iOS版的Safari、Android版的webkit、bada版的Dolfin、OS6中的BlackBerry webkit、Opera中的Mobile10.1 和 LG專有的PHantom瀏覽器。但是隻有IOS的Safari支持多點觸摸。桌面版本的Firefox6+和Chrome也支持觸摸。
四：iOS2.0中的手勢事件：gesture事件
注意：下面的事件只能在iOS中運行。在iOS中檔兩個手指操作的時候，就會產生手勢，手勢通常用於改變顯示元素的大小，或者旋轉顯示的元素。手勢事件分爲三種：
1.gesturestart：當一個手指已經按在屏幕上，另一個手指又觸摸屏幕的時候觸發。類似於touchstart的作用一樣；
2.gesturechange：當觸摸屏幕的任何一個手指的位置發生變化的時候觸發。
3.gestureend：當任何一個手指從屏幕上面移開時觸發。
下面這些代碼在安卓上不能用，只有在iOS上可以使用：
var mydiv = document.getElementById('myDiv');
function gesture(event){
console.log(event)
switch(event.type){
case "gesturestart" :
mydiv.innerHTML = "gesture start (rotation=" + event.rotation + ',scale=' + event.scale + ')';
break;
case "gesturechange" :
mydiv.innerHTML = "gesture change (rotation=" + event.rotation + ',scale=' + event.scale + ')';
break;
case "gestureend" :
mydiv.innerHTML = "gesture end (rotation=" + event.rotation + ',scale' + event.scale + ')';
break;
}
}
document.addEventListener('gesturestart',gesture,false);
document.addEventListener('gesturechange',gesture,false);
document.addEventListener('gestureend',gesture,false);