JavaScript Tutorial/Event/Mouse Event

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

Display current mouse position in status bar (IE)

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body onmousedown="clicked()"> </body> </html></source>


Get mouse clicked button

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    button down is " + oEvent.button;
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Get mouse client X and Y

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Get mouse screen X and Y

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Get X/Y screen position (IE)

   <source lang="javascript">

<html> <head> <title>X/Y Marks the Spot</title> <script type="text/javascript"> function mouseDown(nsEvent) {

 var theEvent = nsEvent ? nsEvent : window.event;
 var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
 alert(locString);

} document.onmousedown=mouseDown; </script> </head> <body> </body> </html></source>


Is alt key pressed during the mouse click

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    button down is " + oEvent.button;
       var arrKeys = [];
       if (oEvent.altKey) {
           arrKeys.push("Alt");
       }
       oTextbox.value += "\n    keys down are " + arrKeys;
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Is control key pressed during the mouse click

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    button down is " + oEvent.button;
       var arrKeys = [];
       if (oEvent.ctrlKey) {
           arrKeys.push("Ctrl");
       }
       oTextbox.value += "\n    keys down are " + arrKeys;
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Is Shift key pressed during the mouse click

   <source lang="javascript">

<html> <head> <title>Mouse Events Example</title> <script type="text/javascript">

   function handleEvent(oEvent) {
       var oTextbox = document.getElementById("txt1");
       oTextbox.value += "\n    button down is " + oEvent.button;
       var arrKeys = [];
       if (oEvent.shiftKey) {
           arrKeys.push("Shift");
       }
       oTextbox.value += "\n    keys down are " + arrKeys;
   }

</script> </head> <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

</body> </html></source>


Mouse event from and to elements (IE)

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n>" + oEvent.type;
               oTextbox.value += "\n    target is " + oEvent.srcElement.tagName;
               if (oEvent.fromElement) {
                   oTextbox.value += "\n    fromElement is " + oEvent.fromElement.tagName;
               }
               if (oEvent.toElement) {
                   oTextbox.value += "\n    toElement is " + oEvent.toElement.tagName;
               }
           }
       </script>
   </head>
   <body>

Use your mouse to click click the red square and move out.

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


Mouse event related element (Firefox)

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n>" + oEvent.type;
               oTextbox.value += "\n    target is " + oEvent.target.tagName;
               oTextbox.value += "\n    relatedTarget is " + oEvent.relatedTarget.tagName;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the red square.

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


Mouse event target element name

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n>" + oEvent.type;
               oTextbox.value += "\n    target is " + oEvent.srcElement.tagName;
               if (oEvent.fromElement) {
                   oTextbox.value += "\n    fromElement is " + oEvent.fromElement.tagName;
               }
               if (oEvent.toElement) {
                   oTextbox.value += "\n    toElement is " + oEvent.toElement.tagName;
               }
           }
       </script>
   </head>
   <body>

Use your mouse to click click the red square and move out.

<textarea id="txt1" rows="15" cols="50"></textarea>

   </body>

</html></source>


onclick mouse event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


ondblclick mouse event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


onmousedown event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


onmouseout event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


onmouseover event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


onmouseup event handler

   <source lang="javascript">

<html>

   <head>
       <title>Mouse Events Example</title>
       <script type="text/javascript">
           function handleEvent(oEvent) {
               var oTextbox = document.getElementById("txt1");
               oTextbox.value += "\n" + oEvent.type;
           }
       </script>
   </head>
   <body>

Use your mouse to click and double click the black square.

<textarea id="txt1" rows="35" cols="50"></textarea>

   </body>

</html></source>


Set element"s pixelTop and pixelLeft to current mouse event (IE)

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body onmousemove="moved()">

Squeak!

</body> </html></source>


Use mouse in/out action to trigger the style change

   <source lang="javascript">

<html> <head> <title>Style Example</title> </head> <body>

Move your mouse over the square.

</body> </html></source>