Logo Media Nauka

Facebook

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>
Kliknij tu


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>
Kliknij tu


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>
Kliknij tu

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>
Lupa


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


Inne zagadnienia z tej lekcji

Obiekty w JavaScriptObiekty w JavaScript
Opis tworzenia obiektów w JavaScript. W języku JavaScript możemy tworzyć własne obiekty, przypisywać im właściwości oraz metody. W tym artykule zajmujemy się tym właśnie zagadnieniem.
Moduły w JavaScriptModuły w JavaScript
moduły w JavaScript to obowiązkowy element każdej większej aplikacji. Dzięki nim można utrzymać kod w należytym porządku. Moduły chronią przed błędami, które wynikają z przypadkowego nadpisywania wartości zmiennych.
Zdarzenia w JavaScriptZdarzenia w JavaScript
Zdarzenia w JavaScript to pewne akcje, które są podejmowane w przeglądarce, w wyniku zaistnienia danej sytuacji, na przykład naciśnięcia klawisza na klawiaturze, myszce, najechanie kursorem na dany element strony, załadowanie strony internetowej.
Obsługa zdarzeń w JavaScriptObsługa zdarzeń w JavaScript
Jak obsłużyć zdarzenia w JavaScript? W ostatnim artykule zostały omówione zdarzenia predefiniowane w JavaScript, czyli zdarzenia wbudowane w JavaScript. Czas, aby nauczyć się ich używać. Jest kilka sposobów obsługi zdarzeń.







Polecamy w naszym sklepie

laboratorium w szufladzie Modelarstwo i robotyka
Kolorowe skarpetki - football piłka nożna
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Kostka
kolorowe skarpetki góra lodowa
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2021 r.