Layer mouse event: move, click, over, exit, double click : Mouse « Ajax Layer « JavaScript DHTML






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> &middot;
<a href="javascript:red.captureMouseEvents()">red</a> &middot;
<a href="javascript:blue.captureMouseEvents()">blue</a> &middot;
<a href="javascript:green.captureMouseEvents()">green</a>

<p>Release Mouse Events:<br>
<a href="javascript:dynapi.document.releaseMouseEvents()">document</a> &middot;
<a href="javascript:red.releaseMouseEvents()">red</a> &middot;
<a href="javascript:blue.releaseMouseEvents()">blue</a> &middot;
<a href="javascript:green.releaseMouseEvents()">green</a>

<p>Turn off text-selection:<br>
<a href="javascript:dynapi.document.setTextSelectable(false)">document</a> &middot;
<a href="javascript:red.setTextSelectable(false)">red</a> &middot;
<a href="javascript:blue.setTextSelectable(false)">blue</a> &middot;
<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

1.Add mouse down, over, up and out event to an image
2.Text selection on/off for mouse event
3.Mouse Button Test
4.Get layer mouse click event
5.Mouse Click Speed Test (IE)