JavaScript Tutorial/Event/Mouse Event — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:24, 26 мая 2010
Содержание
- 1 Display current mouse position in status bar (IE)
- 2 Get mouse clicked button
- 3 Get mouse client X and Y
- 4 Get mouse screen X and Y
- 5 Get X/Y screen position (IE)
- 6 Is alt key pressed during the mouse click
- 7 Is control key pressed during the mouse click
- 8 Is Shift key pressed during the mouse click
- 9 Mouse event from and to elements (IE)
- 10 Mouse event related element (Firefox)
- 11 Mouse event target element name
- 12 onclick mouse event handler
- 13 ondblclick mouse event handler
- 14 onmousedown event handler
- 15 onmouseout event handler
- 16 onmouseover event handler
- 17 onmouseup event handler
- 18 Set element"s pixelTop and pixelLeft to current mouse event (IE)
- 19 Use mouse in/out action to trigger the style change
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>
<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>