Na programovanie niektorých akcií reagujúcich na pohyb kurzora v okne prehliadača je niekedy potrebné určiť jeho súradnice. Môže to byť vykonané skriptom, ktorý má schopnosť sledovať udalosti vyskytujúce sa v prehliadači. Túto funkciu má skript JavaScript na strane klienta. Ďalej je popísaná jedna z možností získania súradníc kurzora pomocou schopností tohto jazyka.
Inštrukcie
Krok 1
Na získanie aktuálnych súradníc kurzora použite vlastnosti objektu udalosti. Tento objekt má celú sadu vlastností, ktoré sú relevantné pre určenie súradníc kurzora myši. Vlastnosť LayerX obsahuje vzdialenosť meranú v pixeloch od ľavého okraja aktuálnej vrstvy a LayerY - rovnaká vzdialenosť od jej horného okraja. Tieto dve vlastnosti majú synonymá - namiesto event. LayerX môžete písať event.x a namiesto event. LayerY môžete písať event.y. Vlastnosti pageX a pageY obsahujú horizontálne a vertikálne súradnice kurzora vzhľadom na ľavý horný okraj okna prehľadávača a vlastnosti screenX a screenY majú podobné hodnoty vzhľadom na obrazovku monitora.
Krok 2
Pridajte do svojho kódu kontrolu typu prehliadača a okrem vyššie uvedených vlastností v objekte udalosti použite aj vlastnosti clientX a clientY. Je to nevyhnutné, pretože spoločnosť Microsoft vo svojom prehliadači Internet Explorer používa iné označenie vlastnosti. Môžete kombinovať obidva prístupy k určovaniu súradníc, napríklad takto:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Krok 3
Vložte definičný kód súradnice do vlastnej funkcie. Napríklad:
funkcia GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordinateX, "coordY": coordinateY};
}
Táto funkcia vracia pole dvoch pomenovaných prvkov, z ktorých prvý (s kľúčom coordX) obsahuje súradnicu X a druhý (coordY) obsahuje súradnicu Y.
Krok 4
Túto funkciu zavolajte na nejakú udalosť - napríklad na udalosť pohybu myšou (onmousemove) v kontexte dokumentu. Nasledujúca ukážka používa funkciu na výstup súradníc myši do stavového riadku:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
