Treść udostępniona za zgodą autora. Kurs bezpłatny. Dostosowano układ i odnośniki do tej platformy.
Do zdarzeń, które wywołuje kursor myszki zaliczamy:
| mousedown | przycisk myszki został naciśnięty |
|---|---|
| mouseup | przycisk myszki został puszczony |
| click | przycisk myszki został naciśnięty i puszczony (czyli normalne kliknięcie) |
| dblclick | podwójne kliknięcie |
| mousemove | kursor porusza się po elemencie |
| mouseover | kursor znalazł się na elemencie |
| mouseout | kursor opuścił dany element |
| mouseenter | kursor znalazł się na elemencie |
| mouseleave | kursor opuścił dany element |
| contextmenu | zdarzenie odpalane po kliknięciu prawego guzika myszy (jak otwieranie podręcznego menu) |
Zdarzenia mousedown, mouseup, click
Zdarzenia te są związane z kliknięciem przyciskiem myszki na dany obiekt.
Istnieje pewna różnica miedzy click i mousedown. Przypuśćmy, że użytkownik nacisnął guzik na buttonie, następnie przesunął kursor poza ten button i puścił przycisk myszki. Button zarejestrował tylko zdarzenie mousedown. Podobnie - jeżeli użytkownik naciśnie guzik myszki poza buttonem, przesunie kursor na button i wtedy puści przycisk myszki, to button zarejestruje tylko zdarzenie mouseup.
W Windows dla większości przycisków stosowane jest zdarzenie click. Sprawdź sam - kliknij na którymś z guzików w prawym górnym rogu dowolnego okna (np. na zamykającym [X]), a następnie nie puszczając przycisku zjedź kursorem z tego guzika. Okno się nie zamknie, bo nie zaistniało zdarzenia click, tylko zdarzenie mousedown.
element.addEventListener("mousedown", () => {...});
element.addEventListener("mouseup", () => {...});
element.addEventListener("click", () => {...});
Zdarzenia mouseover, mousemove, mouseout
Zdarzenia mouseover, mousemove i mouseout służą do sprawdzenia, czy użytkownik najechał kursorem na element, czy się po nim porusza lub czy z kursorem opuścił dany element.
element.addEventListener("mouseover", () => {...});
element.addEventListener("mousemove", () => {...});
element.addEventListener("mouseout", () => {...});
mouseenter, mouseleave
Istnieją też bardzo podobne zdarzenia czyli mouseenter i mouseleave.
Różnią się one tym od swoich braci, że nie są odpalane dla dzieci danego elementu.
<ul class="mouseenter-test">
<li><a href="#">Testowy link</a></li>
<li><a href="#">Testowy link</a></li>
<li><a href="#">Testowy link</a></li>
<li><a href="#">Testowy link</a></li>
<li><a href="#">Testowy link</a></li>
</ul>
const ul = document.querySelector(".mouseenter-test");
ul.addEventListener("mouseover", () => {
console.log("mouseover")
});
ul.addEventListener("mouseenter", () => {
console.log("mouseenter")
});
ul.addEventListener("mouseleave", () => {
console.log("mouseleave")
});
ul.addEventListener("mouseout", () => {
console.log("mouseout")
});
Dodatkowe informacje
Tak jak w poprzednim rozdziale, aby pobrać dodatkowe informacje o zaistniałym zdarzeniu, wystarczy, że wypiszemy w konsoli wartość przekazanego do naszej funkcji parametru:
const element = document.querySelector(".element");
element.addEventListener("click", e => {
console.log(e); //MouseEvent
});
Jak zobaczysz, masz dostęp do wielu przydatnych właściwości. Te najczęściej używane omówimy sobie poniżej.
Pozycja kursora
Aby pobrać pozycję kursora na stronie możemy skorzystać z kilku par właściwości:
|
e.pageX e.pageY |
Zwraca pozycje X, Y kursora od górnego lewego narożnika strony |
|---|---|
|
e.clientX e.clientY |
Zwraca pozycję X, Y kursora od lewej krawędzi widocznego obszaru strony (bez uwzględnienia pozycji przewinięcia strony) |
|
e.screenX e.screenY |
Zwraca pozycję X, Y na ekranie monitora (jeżeli masz wiele ekranów to od lewego górnego rogu ekranu leżącego najdalej po lewej stronie) |
|
e.layerX e.layerY |
Zwraca pozycję X, Y na warstwie renderowania. Nie są to standardowe właściwości (1) |
|
e.offsetX e.offsetY |
Zwraca pozycję X, Y kursora na od lewego górnego narożnika danego elementu |
|
x y |
W nowych wersjach przeglądarek są to aliasy dla clientX i clientY |