Layer mouse event: move, click, over, exit, double click
http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI - Mouse Events</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.api');
</script>
<script language="Javascript">
var str = '<br><img src="./dynapiexamples/images/arrowdown.gif" width=9 height=5 alt="" border="0">'+
'<a href="javascript:dynapi.debug.print(\'click on IMG\')" onmousedown="dynapi.debug.print(\'mousedown on IMG\')"><img src="./dynapiexamples/images/arrowup.gif" width=9 height=5 alt="" border="0"></a><br>'+
'text text '+
'<a href="javascript://" onclick="dynapi.debug.print(\'click on LINK\')" onmousedown="dynapi.debug.print(\'mousedown on LINK\')">link link</a>'+
'<form><input type=button value="Button" onclick="dynapi.debug.print(\'click on BUTTON\')" onmousedown="dynapi.debug.print(\'mousedown on BUTTON\')"></form>';
var red = dynapi.document.addChild(new DynLayer(str,250,100,300,300,'red'));
red.name = "red";
var blue = red.addChild(new DynLayer(str,50,100,200,200,'blue'));
blue.name = "blue";
var orange = blue.addChild(new DynLayer(str,0,100,100,100,'orange'));
orange.name = "orange";
var green = blue.addChild(new DynLayer(str,100,100,100,100,'green'));
green.name = "green";
dynapi.document.name = "document";
var returnVal = true;
var updownevents = {};
updownevents.onmouseup = updownevents.onmousedown = function(e) {
var o = e.getSource();
var bc = e.getBubbleChild();
var bcs = bc? ' bubbleChild=' + bc.name : '';
e.defaultValue = returnVal;
DynAPI.debug.print(e.type+' '+o.name+' xy='+e.x+','+e.y+' pXY='+e.pageX+','+e.pageY + ' origin=' + e.getOrigin().name + bcs);
}
var clickdblevents = {};
clickdblevents.onclick = clickdblevents.ondblclick = function(e) {
var o = e.getSource();
var bc = e.getBubbleChild();
var bcs = bc? ' bubbleChild=' + bc.name : '';
e.defaultValue = returnVal;
DynAPI.debug.print(e.type+' '+o.name+' xy='+e.x+','+e.y+' pXY='+e.getPageX()+','+e.getPageY() + ' origin=' + e.getOrigin().name + bcs);
}
var overoutevents = {};
overoutevents.onmouseover = overoutevents.onmouseout = function(e) {
var o = e.getSource();
var bc = e.getBubbleChild();
var bcs = bc? ' bubbleChild=' + bc.name : '';
var rel = e.getRelative();
var rels = '';
if (e.type=="mouseout" && rel) rels = ' to=' + rel.name;
if (e.type=="mouseover" && rel) rels = ' from=' + rel.name;
e.defaultValue = returnVal;
DynAPI.debug.print(e.type+' '+o.name+' origin=' + e.getOrigin().name + rels + bcs);
}
var moveevents = {};
moveevents.onmousemove = function(e) {
var o = e.getSource();
var bc = e.getBubbleChild();
var bcs = bc? ' bc=' + bc.name : '';
e.defaultValue = returnVal;
dynapi.debug.status(o.name+' xy='+e.x+','+e.y+ ' o=' + e.getOrigin().name + bcs);
//DynAPI.debug.print(e.type+' '+o.name+' xy='+e.x+','+e.y+' pXY='+e.getPageX()+','+e.getPage(Y + ' origin=' + e.getOrigin().name + bcs);
}
function rolloverTest() {
dynapi.document.removeAllEventListeners();
red.removeAllEventListeners();
red.color0 = "red";
red.color1 = "#ff9595";
blue.removeAllEventListeners();
blue.color0 = "blue";
blue.color1 = "#c6c6ff";
green.removeAllEventListeners();
green.color0 = "green";
green.color1 = "#b7ffb7";
var el = {
onmouseover : function(e) {
var s = e.getSource();
var b = e.getBubbleChild();
var r = e.getRelative();
var o = e.getOrigin();
//if (b==r) return;
//if (!r.isChildOf(s)) {
//if (s==o) {
if (s!=dynapi.document) s.setBgColor(s.color1);
dynapi.debug.print('over '+s.name);
//}
},
onmouseout : function(e) {
var s = e.getSource();
var b = e.getBubbleChild();
var r = e.getRelative();
var o = e.getOrigin();
//if (r.isChildOf(s)) return;
//if (s==o) {
if (s!=dynapi.document) s.setBgColor(s.color0);
dynapi.debug.print('out '+s.name);
//}
}
};
red.addEventListener(el);
blue.addEventListener(el);
green.addEventListener(el);
dynapi.document.addEventListener(el);
}
dynapi.onLoad(init);
function init() {
}
</script>
</head>
<body bgcolor="#999999" link="yellow">
<p>Set Default Return Value:
<a href="javascript:;" onclick="returnVal = true">true</a> /
<a href="javascript:;" onclick="returnVal = false">false</a>
<p>Capture Mouse Events: (you may have to explicitly capture if no event handlers are defined)<br>
<a href="javascript:dynapi.document.captureMouseEvents()">document</a> ·
<a href="javascript:red.captureMouseEvents()">red</a> ·
<a href="javascript:blue.captureMouseEvents()">blue</a> ·
<a href="javascript:green.captureMouseEvents()">green</a>
<p>Release Mouse Events:<br>
<a href="javascript:dynapi.document.releaseMouseEvents()">document</a> ·
<a href="javascript:red.releaseMouseEvents()">red</a> ·
<a href="javascript:blue.releaseMouseEvents()">blue</a> ·
<a href="javascript:green.releaseMouseEvents()">green</a>
<p>Turn off text-selection:<br>
<a href="javascript:dynapi.document.setTextSelectable(false)">document</a> ·
<a href="javascript:red.setTextSelectable(false)">red</a> ·
<a href="javascript:blue.setTextSelectable(false)">blue</a> ·
<a href="javascript:green.setTextSelectable(false)">green</a>
<p>Listen to mouse up/down events:<br>
document: <a href="javascript:dynapi.document.addEventListener(updownevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(updownevents)">off</a><br>
red: <a href="javascript:red.addEventListener(updownevents)">on</a>/<a href="javascript:red.removeEventListener(updownevents)">off</a><br>
blue: <a href="javascript:blue.addEventListener(updownevents)">on</a>/<a href="javascript:blue.removeEventListener(updownevents)">off</a><br>
green: <a href="javascript:green.addEventListener(updownevents)">on</a>/<a href="javascript:green.removeEventListener(updownevents)">off</a><br>
<p>Listen to click/dblclick events:<br>
document: <a href="javascript:dynapi.document.addEventListener(clickdblevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(clickdblevents)">off</a><br>
red: <a href="javascript:red.addEventListener(clickdblevents)">on</a>/<a href="javascript:red.removeEventListener(clickdblevents)">off</a><br>
blue: <a href="javascript:blue.addEventListener(clickdblevents)">on</a>/<a href="javascript:blue.removeEventListener(clickdblevents)">off</a><br>
green: <a href="javascript:green.addEventListener(clickdblevents)">on</a>/<a href="javascript:green.removeEventListener(clickdblevents)">off</a><br>
<p>Listen to over/out events:<br>
document: <a href="javascript:dynapi.document.addEventListener(overoutevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(overoutevents)">off</a><br>
red: <a href="javascript:red.addEventListener(overoutevents)">on</a>/<a href="javascript:red.removeEventListener(overoutevents)">off</a><br>
blue: <a href="javascript:blue.addEventListener(overoutevents)">on</a>/<a href="javascript:blue.removeEventListener(overoutevents)">off</a><br>
green: <a href="javascript:green.addEventListener(overoutevents)">on</a>/<a href="javascript:green.removeEventListener(overoutevents)">off</a><br>
<p>Listen to mousemove events:<br>
document: <a href="javascript:dynapi.document.addEventListener(moveevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(moveevents)">off</a><br>
red: <a href="javascript:red.addEventListener(moveevents)">on</a>/<a href="javascript:red.removeEventListener(moveevents)">off</a><br>
blue: <a href="javascript:blue.addEventListener(moveevents)">on</a>/<a href="javascript:blue.removeEventListener(moveevents)">off</a><br>
green: <a href="javascript:green.addEventListener(moveevents)">on</a>/<a href="javascript:green.removeEventListener(moveevents)">off</a><br>
<p>Run Test:<br>
<a href="javascript:rolloverTest()">rollover test</a>
<script language="Javascript">
dynapi.document.insertChild(red);
</script>
</body>
</html>
dynapi.zip( 791 k)Related examples in the same category