You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.3 KiB
114 lines
3.3 KiB
<!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>
|
|
|