Programming the World Wide Web

Fejezet

6

6.8. Az egérkurzor pozíciójának meghatározása

Az XHTML dokumentum megjelenítése alatt fellépő minden esemény egy eseményobjektumot hoz létre. Ez az objektum információt szolgáltat az eseményről. Egy egérkattintás esemény a Mouse-Event interfészt implementálja, amely két tulajdonság-párt határoz meg, ezek adják meg az eseményt kiváltó elem helyzetének mértani koordinátáit a képernyőn. A két pár egyike, clientX és clientY, az elem pozícióját a böngészőablak bal felső sarkához viszonyítva adja meg. A másik pár, screenX és screenY, szintén az elem koordinátáit adja meg, viszont a kliens számítógépének a képernyőjéhez viszonyítva. Nyilván az előbbi általában hasznosabb, mint az utóbbi pár.

A következő példában (lásd where.html) két pár szövegmezőt használunk arra, hogy megjelenítsük ezt a négy tulajdonságot, valahányszor az egérgombra kattintanak. Az eseménykezelő meghívását a body elem onclick attribútuma váltja ki. A koordináták alatt egy kép jelenik meg, de csupán azért, hogy a látványt érdekesebbé tegye.

Példánkban az eseménykezelő hívásakor az event változó lesz paraméterként elküldve, amely az elemben éppen létrehozott eseményobjektumra hivatkozik. Ez a „bűvészmutatvány” azért lehetséges, mivel az eseményobjektum implicit módon jött létre. Az eseménykezelőben a formális paraméter segítségével férhetünk hozzá a koordinátákhoz. Megjegyzés: az eseményobjektum kezelése nincs egységes módon implementálva az egyes népszerű böngészőkben. A Firefox böngésző paraméterként küldi az eseménykezelőknek, míg a Microsoft böngészők globális változóként teszik elérhetővé. A where.html-ben bemutatott kód mindkét típusú böngészőben működik, mivel az eseményobjektumot paraméterként adja át az eseménykezelőnek. Egy Microsoft böngészőben működik, mivel globális változóként látható lesz (egy Microsoft böngészőbentulajdonképpen nem is lenne szükség a paraméterként való átadásra). A where.html dokumentum és a hozzá tartozó JavaScript állomány a következő:

<?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"> <!--where.html a where.js-t használja --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Egérkurzor pozíciójának meghatározása</title> <script type="text/javascript" src="where.js" > </script> </head> <body onclick="findIt(event)"> <form> <p> A böngészőablakban: <br /> x: <input type="text" id="xcoor1" size "4" /> y: <input type="text" id="ycoor1" size "4" /> <br /><br /> A képernyő koordinátarendszeréhez képest: <br /> x: <input type="text" id="xcoor2" size "4" /> y: <input type="text" id="ycoor2" size "4" /> </p> </form> </p> <img src="images/sample1.jpg"/> </p> </body> </html> // where.js // Megmutatja az egér koordinátáit a képen, illetve a képernyő // bármely részére való kattintás esetén // Eseménykezelő, ami kiírja a koordinátákat function findIt(evt) { document.getElementById("xcoor1").value = evt.clientX; document.getElementById("ycoor1").value = evt.clientY; document.getElementById("xcoor2").value = evt.screenX; document.getElementById("ycoor2").value = evt.screenY; }

A 6.10. ábra a where.html dokumentumot jeleníti meg:

Egy érdekes megjegyzés az előző példával kapcsolatban, hogy az újabb böngészők az egérkattintást figyelmen kívül hagyják, amennyiben a kurzor a kijelzőn a legalsó eleme alatt van.

Ugrás az oldal tetejére