Pentru a programa unele acțiuni ca răspuns la mișcarea cursorului în fereastra browserului, este uneori necesar să se determine coordonatele acestuia. Acest lucru poate fi realizat de un script care are capacitatea de a urmări evenimentele care au loc în browser. Un script JavaScript partea clientului are această capacitate. Mai jos este descrisă una dintre opțiunile pentru obținerea coordonatelor cursorului utilizând capacitățile acestui limbaj.
Instrucțiuni
Pasul 1
Utilizați proprietățile obiectului eveniment pentru a obține coordonatele curente ale cursorului. Acest obiect are un set întreg de proprietăți relevante pentru determinarea coordonatelor cursorului mouse-ului. Proprietatea LayerX conține distanța măsurată în pixeli de la marginea stângă a stratului curent și LayerY - aceeași distanță de marginea sa superioară. Aceste două proprietăți au sinonime - în loc de event. LayerX, puteți scrie event.x și, în loc de event. LayerY, puteți scrie event.y. Proprietățile pageX și pageY dețin coordonatele orizontale și verticale ale cursorului în raport cu marginea din stânga sus a ferestrei browserului, iar proprietățile screenX și screenY dețin valori similare în raport cu ecranul monitorului.
Pasul 2
Adăugați verificarea tipului de browser în codul dvs. și utilizați proprietățile clientX și clientY în plus față de proprietățile de mai sus de pe obiectul eveniment. Acest lucru este necesar, deoarece Microsoft utilizează o altă denumire de proprietate în browserul său Internet Explorer. Puteți combina ambele abordări pentru a determina coordonatele, de exemplu, astfel:
if (evevnt.pageX || evevnt.pageY) {
coordonateX = evevnt.pageX;
coordonatăY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordonatăY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Pasul 3
Plasați codul de definiție a coordonatelor într-o funcție personalizată. De exemplu:
funcția GetMouse (evevnt) {
var coordonateX = 0, coordonateY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordonateX = evevnt.pageX;
coordonatăY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordonatăY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
returnează {"coordX": coordinateX, "coordY": coordinateY};
}
Această funcție returnează o serie de două elemente denumite, primul dintre care (cu tasta coordX) conține coordonata X, iar al doilea (coordY) conține coordonata Y.
Pasul 4
Apelați această funcție la un anumit eveniment - de exemplu, la evenimentul de mutare a mouse-ului (onmousemove) în contextul documentului. Eșantionul de mai jos folosește o funcție pentru a transmite coordonatele mouse-ului în bara de stare:
document.onmousemove = funcție (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
