can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
115 lines (103 loc) • 3.34 kB
HTML
<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>