http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FEvent%2FMouse_Event
JavaScript Tutorial/Event/Mouse Event - История изменений
2026-04-04T17:47:53Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Mouse_Event&diff=8777&oldid=prev
Admin: 1 версия
2010-05-26T08:24:33Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Mouse_Event&diff=8776&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Display current mouse position in status bar (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
<!--<br />
function clicked()<br />
{<br />
window.status = "You clicked at the coordinates: X = " + event.x + " Y = " + event.y<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onmousedown="clicked()"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get mouse clicked button==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n button down is " + oEvent.button;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get mouse client X and Y==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get mouse screen X and Y==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Get X/Y screen position (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>X/Y Marks the Spot</title><br />
<script type="text/javascript"><br />
function mouseDown(nsEvent) {<br />
var theEvent = nsEvent ? nsEvent : window.event;<br />
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;<br />
alert(locString);<br />
}<br />
document.onmousedown=mouseDown;<br />
</script><br />
</head><br />
<body><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is alt key pressed during the mouse click==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n button down is " + oEvent.button;<br />
var arrKeys = [];<br />
if (oEvent.altKey) {<br />
arrKeys.push("Alt");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is control key pressed during the mouse click==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n button down is " + oEvent.button;<br />
var arrKeys = [];<br />
if (oEvent.ctrlKey) {<br />
arrKeys.push("Ctrl");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Is Shift key pressed during the mouse click==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n button down is " + oEvent.button;<br />
var arrKeys = [];<br />
if (oEvent.shiftKey) {<br />
arrKeys.push("Shift");<br />
}<br />
oTextbox.value += "\n keys down are " + arrKeys;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Mouse event from and to elements (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + oEvent.srcElement.tagName;<br />
if (oEvent.fromElement) {<br />
oTextbox.value += "\n fromElement is " + oEvent.fromElement.tagName;<br />
}<br />
if (oEvent.toElement) {<br />
oTextbox.value += "\n toElement is " + oEvent.toElement.tagName;<br />
}<br />
<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click click the red square and move out.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onmouseout="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Mouse event related element (Firefox)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + oEvent.target.tagName;<br />
oTextbox.value += "\n relatedTarget is " + oEvent.relatedTarget.tagName;<br />
<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the red square.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onmouseout="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Mouse event target element name==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n>" + oEvent.type;<br />
oTextbox.value += "\n target is " + oEvent.srcElement.tagName;<br />
if (oEvent.fromElement) {<br />
oTextbox.value += "\n fromElement is " + oEvent.fromElement.tagName;<br />
}<br />
if (oEvent.toElement) {<br />
oTextbox.value += "\n toElement is " + oEvent.toElement.tagName;<br />
}<br />
<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click click the red square and move out.</p><br />
<div style="width: 100px; height: 100px; background-color: red"<br />
onmouseout="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
id="div1"></div><br />
<P><textarea id="txt1" rows="15" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onclick mouse event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== ondblclick mouse event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onmousedown event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onmouseout event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onmouseover event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== onmouseup event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Mouse Events Example</title><br />
<script type="text/javascript"><br />
function handleEvent(oEvent) {<br />
var oTextbox = document.getElementById("txt1");<br />
oTextbox.value += "\n" + oEvent.type;<br />
}<br />
</script><br />
</head><br />
<body><br />
<P>Use your mouse to click and double click the black square.</p><br />
<div style="width: 200px; height: 200px; background-color: black"<br />
onmouseover="handleEvent(event)"<br />
onmouseout="handleEvent(event)"<br />
onmousedown="handleEvent(event)"<br />
onmouseup="handleEvent(event)"<br />
onclick="handleEvent(event)"<br />
ondblclick="handleEvent(event)" id="div1"></div><br />
<P><textarea id="txt1" rows="35" cols="50"></textarea></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Set element"s pixelTop and pixelLeft to current mouse event (IE)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
<!--<br />
function moved()<br />
{<br />
window.status = "Current mouse coordinates: X = " + event.x + " Y = " + event.y<br />
follower.style.pixelTop = event.y<br />
follower.style.pixelLeft = event.x<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onmousemove="moved()"><br />
<p id="follower" style="position:absolute">Squeak!</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use mouse in/out action to trigger the style change==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Style Example</title><br />
</head><br />
<body><br />
<P>Move your mouse over the square.</p><br />
<div id="div1"<br />
style="background-color: red; height: 50px; width: 50px"<br />
onmouseover="this.style.backgroundColor = "blue""<br />
onmouseout="this.style.backgroundColor = "red""><br />
</div><br />
</body><br />
</html></source></div>