Néhány művelet programozásához a kurzor mozgatására a böngészőablakban néha szükség van annak koordinátáinak meghatározására. Ezt megteheti egy olyan szkript, amely képes nyomon követni a böngészőben előforduló eseményeket. Egy ügyféloldali JavaScript szkript rendelkezik ezzel a képességgel. Az alábbiakban bemutatjuk az egyik lehetőséget a kurzor koordinátáinak megszerzésére a nyelv képességeinek felhasználásával.
Utasítás
1. lépés
Használja az eseményobjektum tulajdonságait a kurzor aktuális koordinátáinak megszerzéséhez. Ennek az objektumnak olyan tulajdonságai vannak, amelyek relevánsak az egér kurzorának koordinátáinak meghatározásához. A LayerX tulajdonság tartalmazza az aktuális réteg bal szélétől pixelben mért távolságot, a LayerY pedig a felső szélétől azonos távolságot. Ez a két tulajdonság szinonimával rendelkezik - az event. LayerX helyett az event.x, az event. LayerY helyett pedig az event.y fájlt írhatja. Az pageX és pageY tulajdonságok megtartják a kurzor vízszintes és függőleges koordinátáit a böngészőablak bal felső széléhez viszonyítva, a screenX és screenY tulajdonságok pedig a monitor képernyőjéhez hasonló értékeket tartalmaznak.
2. lépés
Adja hozzá a böngésző típusának ellenőrzését a kódjához, és használja a clientX és clientY tulajdonságokat a fenti tulajdonságok mellett az eseményobjektumon. Erre azért van szükség, mert a Microsoft más tulajdonságmegjelölést használ az Internet Explorer böngészőben. Kombinálhatja mindkét megközelítést a koordináták meghatározásához, például:
if (evevnt.oldalX || evevnt.oldalY) {
koordinátaX = evevnt.oldalX;
koordinátaY = evevnt.oldalY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinátaX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinátaY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
3. lépés
Helyezze a koordináta-meghatározási kódot egy egyedi függvénybe. Például:
függvény GetMouse (evevnt) {
var koordinátaX = 0, koordinátaY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.oldalX || evevnt.oldalY) {
koordinátaX = evevnt.oldalX;
koordinátaY = evevnt.oldalY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinátaX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinátaY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": koordinátaX, "coordY": koordinátaY};
}
Ez a függvény két megnevezett elem tömbjét adja vissza, amelyek közül az első (a coordX gombbal) tartalmazza az X koordinátát, a második (coordY) pedig az Y koordinátát.
4. lépés
Hívja ezt a függvényt valamilyen eseményre - például az egér mozgatásakor (onmousemove) a dokumentum kontextusában. Az alábbi minta egy függvény segítségével adja ki az egér koordinátáit az állapotsorba:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koordináta X:" + CurCoord.coordX + "px, Y koordináta:" + CurCoord.coordY + "px";};
