Da biste programirali neke radnje kao odgovor na pomicanje kursora u prozoru preglednika, ponekad je potrebno odrediti njegove koordinate. To može učiniti skripta koja ima mogućnost praćenja događaja koji se događaju u pregledniku. JavaScript skripta na strani klijenta ima ovu mogućnost. Ispod je opisana jedna od mogućnosti za dobivanje koordinata kursora pomoću mogućnosti ovog jezika.
Upute
Korak 1
Koristite svojstva objekta događaja da biste dobili trenutne koordinate pokazivača. Ovaj objekt ima čitav niz svojstava koja su bitna za određivanje koordinata pokazivača miša. Svojstvo LayerX sadrži udaljenost izmjerenu u pikselima od lijevog ruba trenutnog sloja i LayerY - istu udaljenost od gornjeg ruba. Ova dva svojstva imaju sinonime - umjesto event. LayerX možete napisati event.x, a umjesto event. LayerY možete napisati event.y. Svojstva pageX i pageY sadrže vodoravne i okomite koordinate pokazivača u odnosu na gornji lijevi rub prozora preglednika, a svojstva screenX i screenY imaju slične vrijednosti u odnosu na zaslon monitora.
Korak 2
Dodajte provjeru vrste preglednika u svoj kôd i upotrijebite svojstva clientX i clientY uz gore navedena svojstva na objektu događaja. To je neophodno jer Microsoft u pregledniku Internet Explorer koristi drugu oznaku svojstva. Možete kombinirati oba pristupa određivanju koordinata, na primjer, ovako:
if (evevnt.pageX || evevnt.pageY) {
koordinataX = evevnt.pageX;
koordinataY = evevnt.pageY;
}
inače ako (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinataY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
3. korak
Postavite kôd definicije koordinata u prilagođenu funkciju. Na primjer:
funkcija GetMouse (evevnt) {
var koordinataX = 0, koordinataY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
koordinataX = evevnt.pageX;
koordinataY = evevnt.pageY;
}
inače ako (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinataY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"ordinaX ": koordinataX," koordinataY ": koordinataY};
}
Ova funkcija vraća niz od dva imenovana elementa, od kojih prvi (s tipkomordordX) sadrži X koordinatu, a drugi (koordinataY) sadrži Y koordinatu.
4. korak
Pozovite ovu funkciju na neki događaj - na primjer, na događaj pomicanja miša (onmousemove) u kontekstu dokumenta. Uzorak u nastavku koristi funkciju za izlaz koordinata miša na statusnu traku:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koordinata X:" + CurCoord.coordX + "px, koordinata Y:" + CurCoord.coordY + "px";};
