Mõne toimingu programmeerimiseks vastusena brauseriakna kursori liikumisele on mõnikord vaja määrata selle koordinaadid. Seda saab teha skriptiga, millel on võimalus jälgida brauseris toimuvaid sündmusi. See võimalus on kliendipoolsel JavaScripti skriptil. Allpool on kirjeldatud ühte võimalust kursori koordinaatide saamiseks selle keele võimaluste abil.
Juhised
Samm 1
Kursori praeguste koordinaatide saamiseks kasutage sündmuse objekti atribuute. Sellel objektil on terve hulk omadusi, mis on olulised hiirekursori koordinaatide määramiseks. Atribuut LayerX sisaldab pikslites mõõdetud kaugust praeguse kihi vasakust servast ja LayerY - sama kaugust selle ülemisest servast. Nendel kahel atribuudil on sünonüümid - event. LayerX asemel saate kirjutada event.x ja event. LayerY asemel võite kirjutada event.y. Atribuudid pageX ja pageY hoiavad kursori horisontaalset ja vertikaalset koordinaati brauseriakna vasaku ülemise serva suhtes ning omadusedX ja screenY atribuudid hoiavad kuvari ekraani suhtes sarnaseid väärtusi.
2. samm
Lisage oma koodile brauseri tüübi kontroll ja kasutage sündmuse objektil lisaks ülaltoodud atribuutidele atribuute clientX ja clientY. See on vajalik, kuna Microsoft kasutab oma Internet Exploreri brauseris teistsugust atribuuti. Koordinaatide määramiseks võite kombineerida näiteks mõlemat lähenemisviisi:
kui (evevnt.lkX || evevnt.lkY) {
koordinaatX = evevnt.lehtX;
koordinaatY = evevnt.lehtY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinaatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinaatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
3. samm
Asetage koordinaatide määratluse kood kohandatud funktsiooni. Näiteks:
funktsioon GetMouse (evevnt) {
var-koordinaat X = 0, koordinaat Y = 0;
if (! evevnt) evevnt = window.event;
kui (evevnt.pageX || evevnt.pageY) {
koordinaatX = evevnt.lehtX;
koordinaatY = evevnt.lehtY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinaatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinaatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": koordinaatX, "coordY": koordinaatY};
}
See funktsioon tagastab kahe nimega elemendi massiivi, millest esimene (koos coordX-klahviga) sisaldab X-koordinaati ja teine (coordY) Y-koordinaati.
4. samm
Helistage see funktsioon mõnele sündmusele - näiteks dokumendi kontekstis hiire liigutamise sündmusele (onmousemove). Allpool olev näide kasutab funktsiooni hiire koordinaatide väljastamiseks olekuribale:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koordinaat X:" + CurCoord.coordX + "px, koordinaat Y:" + CurCoord.coordY + "px";};
