Joidenkin toimintojen ohjelmoimiseksi vastauksena kohdistimen liikkumiseen selainikkunassa on joskus tarpeen määrittää sen koordinaatit. Tämä voidaan tehdä komentosarjalla, jolla on kyky seurata selaimessa tapahtuvia tapahtumia. Asiakaspuolen JavaScript-komentosarjassa on tämä ominaisuus. Alla on kuvattu yksi vaihtoehdoista saada kohdistimen koordinaatit tämän kielen ominaisuuksien avulla.
Ohjeet
Vaihe 1
Käytä tapahtumaobjektin ominaisuuksia saadaksesi kohdistimen nykyiset koordinaatit. Tällä objektilla on koko joukko ominaisuuksia, jotka ovat merkityksellisiä hiiren kohdistimen koordinaattien määrittämisessä. LayerX-ominaisuus sisältää pikseleinä mitatun etäisyyden nykyisen kerroksen vasemmasta reunasta ja LayerY - saman etäisyyden sen yläreunasta. Näillä kahdella ominaisuudella on synonyymit - event. LayerX: n sijaan voit kirjoittaa event.x: n ja event. LayerY: n sijaan event.y. PageX- ja pageY -ominaisuudet pitävät kohdistimen vaaka- ja pystykoordinaatit selainikkunan vasempaan yläreunaan nähden, ja screenX- ja screenY-ominaisuudet pitävät samanlaisia arvoja näytön näyttöön nähden.
Vaihe 2
Lisää selaimen tyyppitarkistus koodiin ja käytä clientX- ja clientY-ominaisuuksia yllä olevien ominaisuuksien lisäksi tapahtuma-objektissa. Tämä on välttämätöntä, koska Microsoft käyttää Internet Explorer -selaimessa eri omaisuuden nimeä. Voit yhdistää molemmat lähestymistavat koordinaattien määrittämiseen esimerkiksi seuraavasti:
if (evevnt.sivuX || evevnt.sivuY) {
koordinaattiX = evevnt.sivuX;
koordinaattiY = evevnt.sivuY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinaattiX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinaattiY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Vaihe 3
Aseta koordinaattien määrittelykoodi mukautettuun toimintoon. Esimerkiksi:
funktio GetMouse (evevnt) {
var-koordinaattiX = 0, koordinaattiY = 0;
if (! evevnt) evevnt = ikkuna.tapahtuma;
if (evevnt.sivuX || evevnt.sivuY) {
koordinaattiX = evevnt.sivuX;
koordinaattiY = evevnt.sivuY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinaattiX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinaattiY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": koordinaattiX, "coordY": koordinaattiY};
}
Tämä funktio palauttaa taulukon kahdesta nimetystä elementistä, joista ensimmäinen (coordX-näppäimellä) sisältää X-koordinaatin ja toinen (coordY) sisältää Y-koordinaatin.
Vaihe 4
Kutsu tätä toimintoa joillekin tapahtumille - esimerkiksi hiiren siirtotapahtumalle (onmousemove) asiakirjan yhteydessä. Alla oleva esimerkki käyttää funktiota hiiren koordinaattien lähettämiseen tilariville:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
