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 |
|
16 | div, h1 {
|
17 | background-color: white;
|
18 | }
|
19 | div:hover, h1:hover {
|
20 | background-color: cyan;
|
21 | }
|
22 |
|
23 |
|
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 |
|
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 |
|
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>
|