115 lines
3.4 KiB
HTML
115 lines
3.4 KiB
HTML
<!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>
|