source: Dev/trunk/src/client/dojo/tests/_base/eventMouse.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 3.3 KB
Line 
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>
Note: See TracBrowser for help on using the repository browser.