Obsługa myszy w JavaScript

Przy okazji omawiania zdarzeń w JavaScript zostały omówione po krótce Zdarzenia związane z obsługą myszy. Proponuję tam zajrzeć, zanim przedstawię przykłady.

Przykład 1 - Zdarzenia MouseDown, MouseUp, Click

Zdarzenia te są związane z naciskaniem przycisku myszy. Czym sie różnią te zdarzenia? W momencie naciśnięcia klawisza myszy wyzwalane jest zdarzenie MouseDown, w momencie puszczenia - MouseUp, a jeżeli dla obiektu silnik wykryje jedno zdarzenie Mousedown i MouseUp, wywołane zostanie zdarzenie Click.

Dla zajścia każdego zdarzenia z dwóch: mousedown i mouseup na obiekcie "Kliknij tu" pod poniższym kodem, zostanie wykonana funkcja w pierwszym przypadku zmiany koloru na czerwony, w drugim - na zielony.

Naciśnij i przytrzymaj przycisk myszki na przycisku "Kliknij tu".

<div id="przycisk-1" class="box centruj">Kliknij tu</div>

<script>
element = document.getElementById('przycisk-1');
element.addEventListener('mousedown', function() {this.style.background = 'red';})
element.addEventListener('mouseup', function() {this.style.background = 'green';}))
</script>

Przykład 2 - Zdarzenia MouseOver, MouseMove, MouseOut

Zdarzenia te są związane z ruchem wskaźnika myszy nad danym obiektem. Czym się różnią te zdarzenia? W momencie najechania wskaźnikiem myszy na obiekt wyzwalane jest zdarzenie MouseOver, w momencie poruszania wskaźnikiem nad obiektem - MouseMove, w chwili opuszczenia regionu obiektu - MouseOut.

Dla zajścia każdego zdarzenia z wyżej wymienionych na obiekcie pod poniższym kodem zostanie wykonana funkcja w pierwszym przypadku zmiany napisu, w drugim - na zielony, trzecim - na niebieski.

Najedź kursorem myszy na przycisk "Kliknij tu". Za zmianę koloru na zielony odpowiada zdarzenie mousemove, zmianę napisu - mouseover, zmianę koloru na niebieski i przywrócenie napisu - mouseout.

<div id="przycisk-2" class="box centruj">Kliknij tu</div>

<script>
element = document.getElementById('przycisk-2');
element.addEventListener('mouseover', function() {this.innerHTML='Zaszło zdarzenie MouseOver';})
element.addEventListener('mousemove', function() {this.style.background = 'green';})
element.addEventListener('mouseout', function() {this.style.background = 'blue'; this.innerHTML='Kliknij tu';})
</script>

Bąbelkowe przechwytywanie zdarzeń.

Jeżeli mamy do czynienia z obiektami zagnieżdżonymi, to zdarzenia wyżej wymienione działają także na obiektach potomnych. Aby wyłączyć tę opcję należny ustawić właściwość window.event.cancelBubble na true (w przeglądarce firmy Microsoft) albo uzyć metody e.stopPropagation() w pozostałych przeglądarkach.

<script>
function wylaczBabelki(e) {
    if (!e) {var e = window.event;}
    e.cancelBubble = true; 
    if (e.stopPropagation) {e.stopPropagation();}
}
</script>

Przykład 3 - Odczyt pozycji kursora myszy

Przy okazji omawiania zdarzeń w Javascript zostały omówione po krótce Zdarzenia związane z obsługą myszy (druga tabela).

Poniższy kod umożliwia wyświetlenie pozycji x kursowa myszy na ekranie, gdy tylko kursor porusza się po obszarze obiektu "Kliknij tu" pod kodem skryptu.

<div id="przycisk-3" class="box centruj">Kliknij tu</div>

<script>
function pozycjaMyszy(zdarzenie) {
var x=0;
if (!zdarzenie) {var zdarzenie = window.event;} // dotyczy IE
x=zdarzenie.screenX;
return x;
}
element = document.getElementById('przycisk-3');
element.addEventListener('mousemove', function() {this.innerHTML='Pozycja x myszy:'+pozycjaMyszy(zdarzenie);})
</script>

Odczyt, który przycisk myszy został wciśnięty

Właściwość button informuje, który przycisk myszy został naciśnięty (0 - lewy, 1 środkowy, 2 - prawy przycisk myszy, a w IE 8 i wcześniejszych wersjach: 1 - lewy, 2 - prawy, 4 - środkowy przycisk myszy), natomiast buttons zwraca numer, który identyfikuje wciśnięty klawisz myszy.

Przykład 4 - Przycisk myszy

Wystarczy ożyć poniższego kodu:

<script>
function ktoryPrzycisk(event) {
    alert("Wcisnąłeś przycisk: " + event.button)
}
</script>

Inne zagadnienia z tej lekcji

© medianauka.pl, 2016-12-22, A-3346