JavaScript DHTML/Ajax Layer/Mouse

Материал из Web эксперт
Перейти к: навигация, поиск

Add mouse down, over, up and out event to an image

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - Functions</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.library");
dynapi.library.include("dynapi.functions");
dynapi.library.include("dynapi.api");
</script>
</head>
<body>
<font face="arial" size="2">
<script>
var doc=document;
f=dynapi.functions;

// very simple mouse down & over setup
var params={};
params.tooltip="Click here";
params.oversrc="./dynapiexamples/images/oversrc.gif";
params.downsrc="./dynapiexamples/images/downsrc.gif";
params.onclick=function(){alert("Hello!")};
params.onmouseover="status="Over!"";
params.onmouseout="status="Out!"";
params.onmousedown="status="Down!"";
params.onmouseup="status="Up!"";
var img=f.getImage("./dynapiexamples/images/src.gif",95,15,params)
doc.write("getImage: "+img.getHTML());
doc.write(" "+img.getHTML({tooltip:"Another Image",onclick:"alert("Hello Again!")"})+"<br><br>");
</script>
</font>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Get layer mouse click event

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>Click Event & setHTML()</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
  dynapi.library.setPath("./dynapisrc/");
  dynapi.library.include("dynapi.api");
  dynapi.library.include("dynapi.functions");
  dynapi.library.include("dynapi.library");
  dynapi.library.include("dynapi.api.ext.DragEvent");
</script>
<script language="Javascript">
  var t="<table bgcolor="yellow" border="0" width="100" height="100"><tr><td align="center" valign="middle"><table><tr><td>Hello</td></tr></table></td></tr></table>";
  var lyr = dynapi.document.addChild(new DynLayer(t,100,100));
  e={
    onmousedown:function(e){
      var o=e.getSource();
      o.setHTML("<table bgcolor="yellow" border="0" width="100" height="100"><tr><td align="center" valign="middle"><table><tr><td>DOWN</td></tr></table></td></tr></table>");
    },
    onmouseup:function(e){
      var o=e.getSource();
      o.setHTML("<table bgcolor="yellow" border="0" width="100" height="100"><tr><td align="center" valign="middle"><table><tr><td>UP</td></tr></table></td></tr></table>");
    },
    onclick:function(e){
      var o=e.getSource();
      o.setHTML("<table bgcolor="yellow" border="0" width="100" height="100"><tr><td align="center" valign="middle"><table><tr><td>CLICK</td></tr></table></td></tr></table>");
    }
  }
  lyr.addEventListener(e);
</script>
</head>
<body>
When the layer in the following example is clicked the mouse down event is fired and setHTML() 
is called. When the mouse is released the mouse up event is fired and setHTML() is called, but 
the click event was not triggered.
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


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>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Mouse Button Test

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999       
<html>
<head>
<title>Drag - Mouse Button Test</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
var lyr = new DynLayer(null,0,0,100,100,"e0e0e0");
lyr.addEventListener({
     ondragstart:function(e){
          status=e.getButton();
          if(e.getButton() == "right"){
               e.cancelDrag();
          }
     }
});
DragEvent.enableDragEvents(lyr);
dynapi.document.addChild(lyr);
dynapi.document.disableContextMenu();

</script>
</head>
<body>
You can drag and drop me with mouse left( and middle) button.
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Mouse Click Speed Test (IE)

http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>Mouse Click Speed Test (IE)</title>
<script language="Javascript">

</script>
</head>
<body bgcolor="#FFFFFF">
<script>
var c = 0;
function clickspeed() {
  status=c++;
}
</script>
<div style="width:100;height:100;background-color:yellow" onmouseup="clickspeed()"></div>
When clicking extremely fast, IE seems to miss about<BR>every
other click (or mouse down) event.� I modified the example so it works with Mozilla too,
for<BR>comparison.� It seems Mozilla doesn"t like numeric status, takes
only<BR>string, doesn"t auto-convert, and requires the window.status.� I did
not<BR>observe any dropped clicks in Mozilla.
Solution for IE is to use onmouseup
</body>
</html>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Text selection on/off for mouse event

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>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Mouse&oldid=1673»