-
Notifications
You must be signed in to change notification settings - Fork 1
/
DeviceEvent.html
89 lines (75 loc) · 2.7 KB
/
DeviceEvent.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
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<title>ContextMenu Event Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="EventUtil.js"></script>
<meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0">
</head>
<body>
<div id="myDiv"></div>
<div id="myDiv1"></div>
<div id="output"></div>
<div id="output1"></div>
<br>
<a href="http://baidu.com" >baidu</a>
<script type="text/javascript">
EventUtil.addHandler(window, "load", function(event) {
// 获取myDiv
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Current orientation is " + window.orientation;
/// 获取当前的屏幕事件
EventUtil.addHandler(window, "orientationchange", function() {
myDiv.innerHTML = "Current orientation is " + window.orientation;
});
/// Device orientation
var myDiv1 = document.getElementById("myDiv1");
EventUtil.addHandler(window, "deviceorientation", function(event) {
event = EventUtil.getEvent(event);
myDiv1.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta + ", Gamma=" + event.gamma;
});
});
/// Touch event
function handleTouchEvent(event) {
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch start (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
output.innerHTML = "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);
/// Gesture event
function handleGestureEvent(event) {
if (true) {
var output = document.getElementById("output1");
switch (event.type) {
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation + ", scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML = "Gesture ended (rotation=" + event.rotation + ", scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML = "Gesture changed (rotation=" + event.rotation + ", scale=" + event.scale + ")";
break;
}
}
}
EventUtil.addHandler(document, "gesturestart", handleGestureEvent);
EventUtil.addHandler(document, "gestureend", handleGestureEvent);
EventUtil.addHandler(document, "gesturechange", handleGestureEvent);
</script>
</body>
</html>