eventMouse.html
3.26 KB
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>mouse events test</title>
<style type="text/css">
@import "../../resources/dojo.css";
div {
margin: 10px;
padding: 10px;
border: medium inset gray;
}
/* highlight on hover so it's clear where robot has moved the mouse */
div, h1 {
background-color: white;
}
div:hover, h1:hover {
background-color: cyan;
}
/* apply width to top level nodes, not using body > * since it doesn't work on IE6 */
.top {
width: 500px;
}
</style>
<script type="text/javascript" djConfig="isDebug: true" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function() {
// Log of events, used by automated test harness
moveEvents = [];
clickEvents = [];
downEvents = [];
dojo.connect(dojo.byId("outer"), "onmouseenter", function(evt){
moveEvents.push({target: evt.target.id, event: "mouseenter"});
console.log(dojo.toJson(moveEvents[moveEvents.length-1]));
});
dojo.connect(dojo.byId("outer"), "onmouseleave", function(evt){
moveEvents.push({target: evt.target.id, event: "mouseleave"});
console.log(dojo.toJson(moveEvents[moveEvents.length-1]));
});
handles = dojo.map(["outer", "middle", "inner1", "inner2"], function(id){
var node = dojo.byId(id);
return [
dojo.connect(node, "onclick", function(evt){
clickEvents.push({
target: evt.target.id,
currentTarget: evt.currentTarget.id,
event: "click"
});
console.log(dojo.toJson(clickEvents[clickEvents.length-1]));
if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
dojo.stopEvent(evt);
}
}), /*
dojo.connect(node, "onclick", function(evt){
// repeated click event just to make sure that 2 events work
clickEvents.push({
target: evt.target.id,
currentTarget: evt.currentTarget.id,
event: "click"
});
console.log("repeated click event: " + dojo.toJson(clickEvents[clickEvents.length-1]));
if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
dojo.stopEvent(evt);
}
}),
*/
dojo.connect(node, "onmousedown", function(evt){
if(evt.type == "unload"){
console.error("onmousedown handler got onunload event");
debugger;
return;
}
downEvents.push({
target: evt.target.id,
currentTarget: evt.currentTarget.id,
event: "mousedown",
isLeft: dojo.mouseButtons.isLeft(evt),
isMiddle: dojo.mouseButtons.isMiddle(evt),
isRight: dojo.mouseButtons.isRight(evt)
});
console.log(dojo.toJson(downEvents[downEvents.length-1]));
if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
dojo.stopEvent(evt);
}
})
];
});
});
</script>
</head>
<body>
<h1 id="header" class="top">mouse events test</h1>
<div id="outer" class="top">
<span id="outerLabel">outer</span>
<div id="middle">
<span id="middleLabel">middle</span>
<div id="inner1">inner 1</div>
<div id="labelBetweenInners">between inner 1 and inner 2</div>
<div id="inner2">inner 2</div>
</div>
</div>
<div id="afterOuter" class="top">after outer</div>
</body>
</html>