UNPKG

3.34 kBHTMLView Raw
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3<html>
4<head>
5 <title>mouse events test</title>
6 <style type="text/css">
7 @import "../../resources/dojo.css";
8
9 div {
10 margin: 10px;
11 padding: 10px;
12 border: medium inset gray;
13 }
14
15 /* highlight on hover so it's clear where robot has moved the mouse */
16 div, h1 {
17 background-color: white;
18 }
19 div:hover, h1:hover {
20 background-color: cyan;
21 }
22
23 /* apply width to top level nodes, not using body > * since it doesn't work on IE6 */
24 .top {
25 width: 500px;
26 }
27 </style>
28
29 <script type="text/javascript" djConfig="isDebug: true" src="../../dojo.js"></script>
30
31 <script type="text/javascript">
32 dojo.addOnLoad(function() {
33 // Log of events, used by automated test harness
34 moveEvents = [];
35 clickEvents = [];
36 downEvents = [];
37
38 dojo.connect(dojo.byId("outer"), "onmouseenter", function(evt){
39 moveEvents.push({target: evt.target.id, event: "mouseenter"});
40 console.log(dojo.toJson(moveEvents[moveEvents.length-1]));
41 });
42 dojo.connect(dojo.byId("outer"), "onmouseleave", function(evt){
43 moveEvents.push({target: evt.target.id, event: "mouseleave"});
44 console.log(dojo.toJson(moveEvents[moveEvents.length-1]));
45 });
46
47 handles = dojo.map(["outer", "middle", "inner1", "inner2"], function(id){
48 var node = dojo.byId(id);
49 return [
50 dojo.connect(node, "onclick", function(evt){
51 clickEvents.push({
52 target: evt.target.id,
53 currentTarget: evt.currentTarget.id,
54 event: "click"
55 });
56 console.log(dojo.toJson(clickEvents[clickEvents.length-1]));
57 if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
58 dojo.stopEvent(evt);
59 }
60 }), /*
61
62 dojo.connect(node, "onclick", function(evt){
63 // repeated click event just to make sure that 2 events work
64 clickEvents.push({
65 target: evt.target.id,
66 currentTarget: evt.currentTarget.id,
67 event: "click"
68 });
69 console.log("repeated click event: " + dojo.toJson(clickEvents[clickEvents.length-1]));
70 if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
71 dojo.stopEvent(evt);
72 }
73 }),
74 */
75 dojo.connect(node, "onmousedown", function(evt){
76 if(evt.type == "unload"){
77 console.error("onmousedown handler got onunload event");
78 debugger;
79 return;
80 }
81 downEvents.push({
82 target: evt.target.id,
83 currentTarget: evt.currentTarget.id,
84 event: "mousedown",
85 isLeft: dojo.mouseButtons.isLeft(evt),
86 isMiddle: dojo.mouseButtons.isMiddle(evt),
87 isRight: dojo.mouseButtons.isRight(evt)
88 });
89 console.log(dojo.toJson(downEvents[downEvents.length-1]));
90 if(evt.currentTarget.id == "middle" || evt.currentTarget.id == "outer"){
91 dojo.stopEvent(evt);
92 }
93 })
94 ];
95 });
96 });
97 </script>
98</head>
99<body>
100 <h1 id="header" class="top">mouse events test</h1>
101
102 <div id="outer" class="top">
103 <span id="outerLabel">outer</span>
104 <div id="middle">
105 <span id="middleLabel">middle</span>
106 <div id="inner1">inner 1</div>
107 <div id="labelBetweenInners">between inner 1 and inner 2</div>
108 <div id="inner2">inner 2</div>
109 </div>
110 </div>
111
112 <div id="afterOuter" class="top">after outer</div>
113</body>
114</html>