JavaScript DHTML/Ajax Layer/Mouse

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

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

   <source lang="html4strict">

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> <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!")"})+"

"); </script> </body> </html> 

      </source>

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


Get layer mouse click event

   <source lang="html4strict">

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="
Hello
"; 
 var lyr = dynapi.document.addChild(new DynLayer(t,100,100));
 e={
   onmousedown:function(e){
     var o=e.getSource();
o.setHTML("
DOWN
"); 
   },
   onmouseup:function(e){
     var o=e.getSource();
o.setHTML("
UP
"); 
   },
   onclick:function(e){
     var o=e.getSource();
o.setHTML("
CLICK
"); 
   }
 }
 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> 

      </source>

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


Layer mouse event: move, click, over, exit, double click

   <source lang="html4strict">

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 = "
<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>
"+ "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">

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)
<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:
<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:
<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:
document: <a href="javascript:dynapi.document.addEventListener(updownevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(updownevents)">off</a>
red: <a href="javascript:red.addEventListener(updownevents)">on</a>/<a href="javascript:red.removeEventListener(updownevents)">off</a>
blue: <a href="javascript:blue.addEventListener(updownevents)">on</a>/<a href="javascript:blue.removeEventListener(updownevents)">off</a>
green: <a href="javascript:green.addEventListener(updownevents)">on</a>/<a href="javascript:green.removeEventListener(updownevents)">off</a>
<p>Listen to click/dblclick events:
document: <a href="javascript:dynapi.document.addEventListener(clickdblevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(clickdblevents)">off</a>
red: <a href="javascript:red.addEventListener(clickdblevents)">on</a>/<a href="javascript:red.removeEventListener(clickdblevents)">off</a>
blue: <a href="javascript:blue.addEventListener(clickdblevents)">on</a>/<a href="javascript:blue.removeEventListener(clickdblevents)">off</a>
green: <a href="javascript:green.addEventListener(clickdblevents)">on</a>/<a href="javascript:green.removeEventListener(clickdblevents)">off</a>
<p>Listen to over/out events:
document: <a href="javascript:dynapi.document.addEventListener(overoutevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(overoutevents)">off</a>
red: <a href="javascript:red.addEventListener(overoutevents)">on</a>/<a href="javascript:red.removeEventListener(overoutevents)">off</a>
blue: <a href="javascript:blue.addEventListener(overoutevents)">on</a>/<a href="javascript:blue.removeEventListener(overoutevents)">off</a>
green: <a href="javascript:green.addEventListener(overoutevents)">on</a>/<a href="javascript:green.removeEventListener(overoutevents)">off</a>
<p>Listen to mousemove events:
document: <a href="javascript:dynapi.document.addEventListener(moveevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(moveevents)">off</a>
red: <a href="javascript:red.addEventListener(moveevents)">on</a>/<a href="javascript:red.removeEventListener(moveevents)">off</a>
blue: <a href="javascript:blue.addEventListener(moveevents)">on</a>/<a href="javascript:blue.removeEventListener(moveevents)">off</a>
green: <a href="javascript:green.addEventListener(moveevents)">on</a>/<a href="javascript:green.removeEventListener(moveevents)">off</a>
<p>Run Test:
<a href="javascript:rolloverTest()">rollover test</a> <script language="Javascript"> dynapi.document.insertChild(red); </script> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

Mouse Button Test

   <source lang="html4strict">

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> 

      </source>

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


Mouse Click Speed Test (IE)

   <source lang="html4strict">

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>

When clicking extremely fast, IE seems to miss about
every other click (or mouse down) event.� I modified the example so it works with Mozilla too, for
comparison.� It seems Mozilla doesn"t like numeric status, takes only
string, doesn"t auto-convert, and requires the window.status.� I did not
observe any dropped clicks in Mozilla. Solution for IE is to use onmouseup </body> </html> 


      </source>

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


Text selection on/off for mouse event

   <source lang="html4strict">

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 = "
<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>
"+ "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)
<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:
<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:
<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:
document: <a href="javascript:dynapi.document.addEventListener(updownevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(updownevents)">off</a>
red: <a href="javascript:red.addEventListener(updownevents)">on</a>/<a href="javascript:red.removeEventListener(updownevents)">off</a>
blue: <a href="javascript:blue.addEventListener(updownevents)">on</a>/<a href="javascript:blue.removeEventListener(updownevents)">off</a>
green: <a href="javascript:green.addEventListener(updownevents)">on</a>/<a href="javascript:green.removeEventListener(updownevents)">off</a>
<p>Listen to click/dblclick events:
document: <a href="javascript:dynapi.document.addEventListener(clickdblevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(clickdblevents)">off</a>
red: <a href="javascript:red.addEventListener(clickdblevents)">on</a>/<a href="javascript:red.removeEventListener(clickdblevents)">off</a>
blue: <a href="javascript:blue.addEventListener(clickdblevents)">on</a>/<a href="javascript:blue.removeEventListener(clickdblevents)">off</a>
green: <a href="javascript:green.addEventListener(clickdblevents)">on</a>/<a href="javascript:green.removeEventListener(clickdblevents)">off</a>
<p>Listen to over/out events:
document: <a href="javascript:dynapi.document.addEventListener(overoutevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(overoutevents)">off</a>
red: <a href="javascript:red.addEventListener(overoutevents)">on</a>/<a href="javascript:red.removeEventListener(overoutevents)">off</a>
blue: <a href="javascript:blue.addEventListener(overoutevents)">on</a>/<a href="javascript:blue.removeEventListener(overoutevents)">off</a>
green: <a href="javascript:green.addEventListener(overoutevents)">on</a>/<a href="javascript:green.removeEventListener(overoutevents)">off</a>
<p>Listen to mousemove events:
document: <a href="javascript:dynapi.document.addEventListener(moveevents)">on</a>/<a href="javascript:dynapi.document.removeEventListener(moveevents)">off</a>
red: <a href="javascript:red.addEventListener(moveevents)">on</a>/<a href="javascript:red.removeEventListener(moveevents)">off</a>
blue: <a href="javascript:blue.addEventListener(moveevents)">on</a>/<a href="javascript:blue.removeEventListener(moveevents)">off</a>
green: <a href="javascript:green.addEventListener(moveevents)">on</a>/<a href="javascript:green.removeEventListener(moveevents)">off</a>
<p>Run Test:
<a href="javascript:rolloverTest()">rollover test</a> <script language="Javascript"> dynapi.document.insertChild(red); </script> </body> </html> 


      </source>
<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»