HTML5触摸事件（多点、单点触控）

本文转自：http://www.360us.net/article/9.html

HTML5的触摸API支持处理单点和多点的触摸事件处理。

接口

1、TouchEvent：代表了一个触摸事件。

主要属性：

TouchEvent.changedTouches：一个TouchList对象。代表了所有上一个接触点到当前点状态发生变化的点。

TouchEvent.touches：一个TouchList对象。代表的所有当前触摸点，不管目标或者状态是否改变。

TouchEvent.type：触摸事件类型。有touchstart、touchend、touchmove、touchenter、touchleave和touchleave。

2、Touch：代表一个单独的触摸点。

主要属性：Touch.identifier：这个触摸对象的唯一标识。

3、TouchList：代表一组触摸点。比如同时有多根手指放在在屏幕上面。

4、DocumentTouch：包含创建Touch和TouchList对象的方法。

 

触摸事件

  1. touchstart：触摸的时候发生。

  2. touchend：手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。

  3. touchmove：手指沿着屏幕滑动时触发。

  4. touchenter：触摸点进入到一个元素。

  5. touchleave：触摸点离开一个元素。

  6. touchcancel：当触摸受到干扰而中断时触发。比如一个弹框，或者触摸点离开了文档窗口区域到了其他地方，或者触摸点超出了最大可支持的上限，那么最先的触摸将会退出。

 

下面一个跟踪多点触控的例子，允许用户同时多于一个手指画线，可以直接运行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
     <head><title>Touch Test</title></head>
     <body>
         <canvas id= "canvas"  width= "600"  height= "600"  style= "border:solid black 1px;" >
           Your browser does not support canvas element.
         </canvas>
         <br>
         <br>
         Log: <pre id= "log"  style= "border: 1px solid #ccc;" ></pre>
         <script type= "text/javascript" >
             document.body.onload = startup;  //文档加载完毕触发
 
             var  ongoingTouches =  new  Array();  //用来保存跟踪正在发送的触摸事件
 
             //设置事件处理程序
             function  startup() {
               var  el = document.getElementsByTagName( "canvas" )[0];
               el.addEventListener( "touchstart" , handleStart,  false );
               el.addEventListener( "touchend" , handleEnd,  false );
               el.addEventListener( "touchcancel" , handleCancel,  false );
               el.addEventListener( "touchleave" , handleEnd,  false );
               el.addEventListener( "touchmove" , handleMove,  false );
               log( "initialized." );
             }
 
             //处理触摸开始事件
             function  handleStart(evt) {
               evt.preventDefault();  //阻止事件的默认行为
               log( "touchstart." );
               var  el = document.getElementsByTagName( "canvas" )[0];
               var  ctx = el.getContext( "2d" );
               var  touches = evt.changedTouches;
                     
               for  ( var  i=0; i < touches.length; i++) {
                 log( "touchstart:" +i+ "..." );
                 ongoingTouches.push(copyTouch(touches[i]));
                 var  color = colorForTouch(touches[i]);
                 ctx.beginPath();
                 ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI,  false );   // a circle at the start
                 ctx.fillStyle = color;
                 ctx.fill();
                 log( "touchstart:" +i+ "." );
               }
             }
 
             //处理触摸移动事件
             function  handleMove(evt) {
               evt.preventDefault();
               var  el = document.getElementsByTagName( "canvas" )[0];
               var  ctx = el.getContext( "2d" );
               var  touches = evt.changedTouches;
 
               for  ( var  i=0; i < touches.length; i++) {
                 var  color = colorForTouch(touches[i]);
                 var  idx = ongoingTouchIndexById(touches[i].identifier);
 
                 if (idx >= 0) {
                   log( "continuing touch " +idx);
                   ctx.beginPath();
                   log( "ctx.moveTo(" +ongoingTouches[idx].pageX+ ", " +ongoingTouches[idx].pageY+ ");" );
                   ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
                   log( "ctx.lineTo(" +touches[i].pageX+ ", " +touches[i].pageY+ ");" );
                   ctx.lineTo(touches[i].pageX, touches[i].pageY);
                   ctx.lineWidth = 4;
                   ctx.strokeStyle = color;
                   ctx.stroke();
 
                   ongoingTouches.splice(idx, 1, copyTouch(touches[i]));   // swap in the new touch record
                   log( "." );
                 }  else  {
                   log( "can't figure out which touch to continue" );
                 }
               }
             }
 
             //处理触摸结束事件
             function  handleEnd(evt) {
               evt.preventDefault();
               log( "touchend/touchleave." );
               var  el = document.getElementsByTagName( "canvas" )[0];
               var  ctx = el.getContext( "2d" );
               var  touches = evt.changedTouches;
 
               for  ( var  i=0; i < touches.length; i++) {
                 var  color = colorForTouch(touches[i]);
                 var  idx = ongoingTouchIndexById(touches[i].identifier);
 
                 if (idx >= 0) {
                   ctx.lineWidth = 4;
                   ctx.fillStyle = color;
                   ctx.beginPath();
                   ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
                   ctx.lineTo(touches[i].pageX, touches[i].pageY);
                   ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);   // and a square at the end
                   ongoingTouches.splice(idx, 1);   // remove it; we're done
                 }  else  {
                   log( "can't figure out which touch to end" );
                 }
               }
             }
 
             //处理触摸对出事件
             function  handleCancel(evt) {
               evt.preventDefault();
               log( "touchcancel." );
               var  touches = evt.changedTouches;
               
               for  ( var  i=0; i < touches.length; i++) {
                 ongoingTouches.splice(i, 1);   // remove it; we're done
               }
             }
 
             //选择颜色
             function  colorForTouch(touch) {
               var  r = touch.identifier % 16;
               var  g = Math.floor(touch.identifier / 3) % 16;
               var  b = Math.floor(touch.identifier / 7) % 16;
               r = r.toString(16);  // make it a hex digit
               g = g.toString(16);  // make it a hex digit
               b = b.toString(16);  // make it a hex digit
               var  color =  "#"  + r + g + b;
               log( "color for touch with identifier "  + touch.identifier +  " = "  + color);
               return  color;
             }
 
             //拷贝一个触摸对象
             function  copyTouch(touch) {
               return  { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
             }
 
             //找出正在进行的触摸
             function  ongoingTouchIndexById(idToFind) {
               for  ( var  i=0; i < ongoingTouches.length; i++) {
                 var  id = ongoingTouches[i].identifier;
                 
                 if  (id == idToFind) {
                   return  i;
                 }
               }
               return  -1;     // not found
             }
 
             //记录日志
             function  log(msg) {
               var  p = document.getElementById( 'log' );
               p.innerHTML = msg +  "\n"  + p.innerHTML;
             }
         </script>
     </body>
</html>

文章参考地址及示例来源：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events