本文转自：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对象的方法。
触摸事件
-
touchstart：触摸的时候发生。
-
touchend：手指从屏幕抬起时发生。手指划出了屏幕也会触发这个事件。
-
touchmove：手指沿着屏幕滑动时触发。
-
touchenter：触摸点进入到一个元素。
-
touchleave：触摸点离开一个元素。
-
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
扫一扫
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
