For å programmere noen handlinger som svar på bevegelsen av markøren i nettleservinduet, er det noen ganger nødvendig å bestemme koordinatene. Dette kan gjøres med et skript som har muligheten til å spore hendelser som oppstår i nettleseren. Et JavaScript-skript på klientsiden har denne muligheten. Nedenfor er beskrevet et av alternativene for å skaffe koordinatene til markøren ved hjelp av funksjonene til dette språket.
Bruksanvisning
Trinn 1
Bruk egenskapene til hendelsesobjektet for å få de aktuelle koordinatene til markøren. Dette objektet har et helt sett med egenskaper som er relevante for å bestemme koordinatene til musemarkøren. LayerX-egenskapen inneholder avstanden målt i piksler fra venstre kant av gjeldende lag, og LayerY - samme avstand fra toppkanten. Disse to egenskapene har synonymer - i stedet for event. LayerX kan du skrive event.x, og i stedet for event. LayerY kan du skrive event.y. PageX og pageY-egenskapene har de horisontale og vertikale koordinatene til markøren i forhold til den øvre venstre kanten av nettleservinduet, og egenskapene for screenX og screenY har lignende verdier i forhold til skjermbildet.
Steg 2
Legg til nettlesertypekontroll i koden din og bruk clientX- og clientY-egenskapene i tillegg til de ovennevnte egenskapene på hendelsesobjektet. Dette er nødvendig fordi Microsoft bruker en annen eiendomsbetegnelse i Internet Explorer-nettleseren. Du kan kombinere begge tilnærminger for å bestemme koordinater, for eksempel slik:
hvis (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
annet hvis (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;
}
Trinn 3
Plasser koordinatdefinisjonskoden i en tilpasset funksjon. For eksempel:
funksjon GetMouse (evevnt) {
var koordinatX = 0, koordinatY = 0;
hvis (! evevnt) evevnt = window.event;
hvis (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koordinatY = evevnt.pageY;
}
annet hvis (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;
}
returner {"coordX": coordinateX, "coordY": coordinateY};
}
Denne funksjonen returnerer en matrise med to navngitte elementer, hvorav den første (med coordX-tasten) inneholder X-koordinaten, og den andre (coordY) inneholder Y-koordinaten.
Trinn 4
Kall denne funksjonen på en hendelse - for eksempel på musebevegelseshendelsen (flytt musen) i dokumentkonteksten. Eksemplet nedenfor bruker en funksjon for å sende musekoordinatene til statuslinjen:
document.onmousemove = funksjon (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koord X:" + CurCoord.coordX + "px, koord Y:" + CurCoord.coordY + "px";};
