6.9. Egérkattintás által kiváltott reakció
A következő példa szintén az egérkattintásra való reakcióval kapcsolatos. Ebben az esetben a mousedown és a mouseup eseményeket
használjuk arra, hogy megmutassuk, illetve elrejtsük az egérkurzor alatt a „Kérjük, ne kattintson ide!” üzenetet a képernyőn,
valahányszor az egérgombra kattintunk, függetlenül a kurzor aktuális pozíciójától.
Az eltolások (a bal -left- -130, a felső -top- pedig -25) úgy módosítják a kurzor pozícióját, hogy az üzenet körülbelül középen
jelenjen meg. Íme a dokumentum és a hozzá tartozó JavaScript állomány:
<![CDATA[
<?xml version = "1.0" enconding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll-strict.dtd">
<!-- anywhere.html
Használja az anywhere.js állományt
Üzenetet ír a képernyöre egér-kattintás esetén,
függetlenül a kurzor helyzetétől
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Egér helyzete</title>
<script type = "text/javascript" src = "anywhere.js" >
</script>
</head>
<body onmousedown = "displayIt(event);"
onmouseup = "hideIt();">
<p>
<span id = "message"
style = "color: red; visibility: hidden;
position: relative;
font-size: 20pt; font-style: italic;
font-weight: bold;">
Kérem, ne kattintson ide!
</span>
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
</p>
</body>
</html>
//anywhere.js
// Eseménykezelő, amely kiírja az üzenetet
function displayIt(evt)
{
var dom = document.getElementById("message");
dom.style.left = (evt.clientX - 130) + "px";
dom.style.top = (evt.clientY - 25) + "px";
dom.style.visibility = "visible";
}
// Eseménykezelő, amely elrejti az üzenetet
function hideIt()
{
document.getElementById("message").style.visibility = "hidden";
}
]]>
A 6.11. ábra az anywhere.html dokumentumot jeleníti meg:
Ugrás az oldal tetejére