一：touch事件分類？
1. touchstart：當手指觸摸螢幕時觸發。不管有多少個手指放在了螢幕上，隻要再觸摸一下螢幕就會觸發。在此，我用小米的google浏覽器做了一個實驗，添加一個計數器，用來檢視螢幕上手指觸摸的次數，代碼如下：
window.onload = function(){
var i = ;
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:px;height:px;margin: auto;}
#myDiv2{width:px;height: px;border-radius: px; background-color:deeppink;position: absolute;top:;left:;z-index:}
</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[].clientX;
var coordinateY = event.changedTouches[].clientY;
mydiv2.style.left = parseFloat(coordinateX)- + 'px';
mydiv2.style.top = parseFloat(coordinateY)- + 'px';
myradius.innerHTML = "Touch radius：(" + event.changedTouches[].radiusX.toFixed() + ' ,' + event.changedTouches[].radiusY.toFixed() + ")";
rotationAngle.innerHTML = "Touch rotationAngle：" + event.changedTouches[].rotationAngle;
force.innerHTML = "Touch force：" + event.changedTouches[].force.toFixed();
var intX = parseInt(coordinateX);
var intY = parseInt(coordinateY);
switch(event.type){
case "touchstart" :
myDivStart.innerHTML = "Touch started：(" + event.touches[].clientX.toFixed() + ' ,' + event.touches[].clientY.toFixed() + ")";
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);