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.
132 lines
3.6 KiB
132 lines
3.6 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" 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>
|
|
|