dojo
Version:
Dojo core is a powerful, lightweight library that makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.
133 lines (113 loc) • 3.64 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" data-dojo-config="isDebug: true, async: true" src="../../../dojo.js"></script>
<script type="text/javascript">
var ready;
// Log of events, used by automated test harness
var moveEvents = [];
var clickEvents = [];
var downEvents = [];
require([
'dojo/on',
'dojo/dom',
'dojo/json',
'dojo/_base/array',
'dojo/mouse',
'dojo/domReady!'
], function (on, dom, JSON, array, mouse) {
on(dom.byId('outer'), mouse.enter, function (event) {
moveEvents.push({ target: event.target.id, event: 'mouseenter' });
console.log(JSON.stringify(moveEvents[moveEvents.length-1]));
});
on(dom.byId('outer'), mouse.leave, function (event) {
moveEvents.push({ target: event.target.id, event: 'mouseleave' });
console.log(JSON.stringify(moveEvents[moveEvents.length-1]));
});
array.forEach(['outer', 'middle', 'inner1', 'inner2'], function (id) {
console.log('adding things to ' + id);
var node = dom.byId(id);
on(node, 'click', function(event) {
clickEvents.push({
target: event.target.id,
currentTarget: event.currentTarget.id,
event: 'click'
});
console.log(JSON.stringify(clickEvents[clickEvents.length-1]));
if (event.currentTarget.id === 'middle' || event.currentTarget.id === 'outer') {
event.stopPropagation();
event.preventDefault();
}
}),
// on(node, "click", function(event){
// // repeated click event just to make sure that 2 events work
// clickEvents.push({
// target: event.target.id,
// currentTarget: event.currentTarget.id,
// event: "click"
// });
// console.log("repeated click event: " + JSON.stringify(clickEvents[clickEvents.length-1]));
// if (event.currentTarget.id === "middle" || event.currentTarget.id === "outer") {
// event.stopPropagation();
// event.preventDefault();
// }
// }),
on(node, 'mousedown', function (event) {
if (event.type === 'unload') {
console.error('onmousedown handler got unload event');
debugger;
return;
}
downEvents.push({
target: event.target.id,
currentTarget: event.currentTarget.id,
event: 'mousedown',
isLeft: mouse.isLeft(event),
isMiddle: mouse.isMiddle(event),
isRight: mouse.isRight(event)
});
console.log(JSON.stringify(downEvents[downEvents.length-1]));
if (event.currentTarget.id === 'middle' || event.currentTarget.id === 'outer') {
event.stopPropagation();
event.preventDefault();
}
})
});
ready = true;
});
</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>