最近剛好弄了一個關於在移動端的滾動條，多多少少有點感觸！

touch中共有touchstart、touchmove和touchend三個事件；

touchstart：觸摸開始的時候觸發

touchmove：手指在屏幕上滑動的時候觸發

touchend：觸摸結束的時候觸發

並且每個觸摸事件都包括了三個觸摸列表，每個列表裡包含了對應的一系列觸摸點（用來實現多點觸控）：

touches：當前位於屏幕上的所有手指的列表；

targetTouches：位於當前DOM元素上的手指列表；

changedTouches：涉及當前事件手指的列表。

每個觸摸點由包含瞭如下觸摸信息（常用）：

dentifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。一般為從0開始的流水號（android4.1，uc）

target：DOM元素，是動作所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY：一個數值，動作在屏幕上發生的位置（page包含滾動距離,client不包含滾動距離，screen則以屏幕為基準）。

下麵是我用幾種方法對touch事件的 應用：

第一種方法：

 1 function load() {
 2         document.addEventListener('touchstart', touch, false);
 3         document.addEventListener('touchmove', touch, false);
 4         document.addEventListener('touchend', touch, false);
 5 
 6         function touch(event) {
 7             var event = event || window.event;
 8 
 9             var oParent = document.getElementById("prog");
10             var oDiv = document.getElementById("div");
11             var oDiv1 = document.getElementById("div1")
12             var touch = event.targetTouches[0];
13 
14             switch (event.type) {
15                 case "touchstart":
16 
17                     break;
18                 case "touchend":
19 
20                     break;
21                 case "touchmove":
22                     event.preventDefault();
23                     var l = touch.clientX-oParent.offsetLeft ;
24                     console.log(l)
25                     if (l <= 0) {
26                         l = 0;
27                     } else if (l >= oParent.offsetWidth-oDiv.offsetWidth) {
28                         l = oParent.offsetWidth - oDiv.offsetWidth;
29                     }
30                     var oWidth = (l / oParent.offsetWidth) * 800;
31                     oDiv.style.left = l + "px"
32                     oDiv1.style.width = oWidth + 25 + "px";
33                     break;
34             }
35 
36         }
37     }
38     window.addEventListener('load', load, false);

第二種方法：

 1 window.onload=function(){
 2         var  btn=document.getElementById("div");
 3         var  bg=document.getElementById("div1");
 4         var oP=document.getElementById("prog");
 5         var W=oP.offsetWidth;
 6         console.log(W)
 7         var ox,ex,endx;
 8         btn.addEventListener("touchstart",function(e){
 9             e.preventDefault();
10             ox=e.touches[0].clientX;
11             startX=btn.offsetLeft+3;
12             //console.log(startX);
13         },false);
14         btn.addEventListener("touchmove",function(e){
15             e.preventDefault;
16             ex=e.changedTouches[0].clientX;
17             endx=ex-ox+startX;
18             //console.log(endx)
19             if(endx<=0){
20                 endx=0;
21             }else if(endx>=W-btn.offsetWidth){
22                 endx=W-btn.offsetWidth;
23             }
24             var oWidth=(endx/W)*W;
25             console.log(oWidth)
26             btn.style.left=endx+"px";
27             bg.style.width=oWidth+45+"px";
28 
29         },false)
30         btn.addEventListener("touchend",function(){
31             btn.removeEventListener("touchmove");
32             btn.removeEventListener("tocched");
33         },false)
34     }

以上就是一些關於對touch的理解。