-
Notifications
You must be signed in to change notification settings - Fork 65
/
Copy pathgesture.html
78 lines (73 loc) · 1.78 KB
/
gesture.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#w{
-webkit-user-select: none;
width: 500px;
height: 400px;
background: black;
font-size: 38px;
font-weight: bold;
color: orange;
}
</style>
<body>
<h4>tap doubletap swipe drag transform hold等手势</h4>
<div id="w" class="ww"></div>
<div id="currentPos"></div>
<div id="preTouchPos"></div>
<script type="text/javascript">
</script>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript">
var wobj = JM.dom.id("w");
JM.event.on(wobj,"touchmove touchstart touchend",function(e){
e.stopPropagation();
e.preventDefault();
});
JM.event.on(wobj,"hold",function(e){
// alert(e.position.x+" "+ e.position.y);
wobj.innerHTML="hold";
});
JM.event.on(wobj,"tap",function(e){
if(e.isDoubleTap) wobj.innerHTML="doubletap";
// alert(e.position.x);
else wobj.innerHTML="tap";
});
JM.event.on(wobj,{
dragstart:function() {
wobj.innerHTML="dragstart";
},
drag:function(e){
//console.log(e.angle);
wobj.innerHTML="drag";
},
dragend:function(e){
// alert(e.distance + " " + e.angle);
wobj.innerHTML="dragend";
},
swipe:function(e){
wobj.innerHTML="swipe" + e.direction ;
},
transformstart:function(e){
// J.dom.id("preTouchPos").innerHTML = (e.position.x);
wobj.innerHTML="transformstart";
},
transform:function(e){
wobj.innerHTML="transform: "
+"scale:" + e.scale
+"<br/>"
+"rotation:" + e.rotation;
wobj.style["-webkit-transform"] = "rotate("+e.rotation+"deg) scale("+e.scale+")";
},
transformend:function(e){
// alert(e.rotation);
wobj.innerHTML="transformend";
}
});
</script>
</body>
</html>