Aby zaprogramować niektóre akcje w odpowiedzi na ruch kursora w oknie przeglądarki, czasami konieczne jest określenie jego współrzędnych. Można to zrobić za pomocą skryptu, który ma możliwość śledzenia zdarzeń występujących w przeglądarce. Skrypt JavaScript po stronie klienta ma taką możliwość. Poniżej opisana jest jedna z opcji uzyskania współrzędnych kursora z wykorzystaniem możliwości tego języka.
Instrukcje
Krok 1
Użyj właściwości obiektu zdarzenia, aby uzyskać bieżące współrzędne kursora. Obiekt ten posiada cały zestaw właściwości, które są istotne przy określaniu współrzędnych kursora myszy. Właściwość LayerX zawiera odległość mierzoną w pikselach od lewej krawędzi bieżącej warstwy, a LayerY - taką samą odległość od jej górnej krawędzi. Te dwie właściwości mają synonimy - zamiast event. LayerX możesz napisać event.x, a zamiast event. LayerY możesz napisać event.y. Właściwości pageX i pageY przechowują współrzędne poziome i pionowe kursora względem lewej górnej krawędzi okna przeglądarki, a właściwości screenX i screenY mają podobne wartości w stosunku do ekranu monitora.
Krok 2
Dodaj sprawdzanie typu przeglądarki do kodu i użyj właściwości clientX i clientY oprócz powyższych właściwości w obiekcie zdarzenia. Jest to konieczne, ponieważ firma Microsoft używa innego oznaczenia właściwości w swojej przeglądarce Internet Explorer. Możesz połączyć oba podejścia do określania współrzędnych, na przykład tak:
if (zdarzenie.stronaX || wydarzenie.stronaY) {
współrzędnaX = zdarzenie.stronaX;
współrzędna Y = zdarzenie.stronaY;
}
inaczej if (event.clientX || event.clientY) {
współrzędnychX = zdarzenie.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
współrzędnaY = zdarzenie.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Krok 3
Umieść kod definicji współrzędnych w funkcji niestandardowej. Na przykład:
funkcja GetMouse (zdarzenie) {
var współrzędna X = 0, współrzędna Y = 0;
if (! zdarzenie) zdarzenie = okno.zdarzenie;
if (zdarzenie.stronaX || wydarzenie.stronaY) {
współrzędnaX = zdarzenie.stronaX;
współrzędna Y = zdarzenie.stronaY;
}
else if (event.clientX || event.clientY) {
współrzędnychX = zdarzenie.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
współrzędnaY = zdarzenie.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordnX, "coordY": coordyY};
}
Ta funkcja zwraca tablicę dwóch nazwanych elementów, z których pierwszy (z kluczem coordX) zawiera współrzędną X, a drugi (coordY) zawiera współrzędną Y.
Krok 4
Wywołaj tę funkcję w jakimś zdarzeniu - na przykład w zdarzeniu ruchu myszy (onmousemove) w kontekście dokumentu. Poniższy przykład wykorzystuje funkcję do wyprowadzania współrzędnych myszy na pasek stanu:
document.onmousemove = function (event) {var CurCoord = GetMouse (event); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
