Zdarzenia myszki – pointer-events CSS
Właściwość pointer-events określa jak na dane zdarzenie wywołane z użyciem kursora myszy powinien reagować konkretny obiekt HTML.
Brzmi nieco dziwnie jednak chodzi o zdarzenia takie jak:
- możliwość kliknięcia dowolnego elementu HTML (np. kliknięcia w link)
- najechanie kursorem myszy na obszar elementu HTML (efekt hover)
- dotknięcie elementu HTML na ekranie dotykowym bez użycia myszki (click)
Dzięki takim możliwością możemy uczynić np. jakiś obiekt nieaktywnym przez co możemy mieć interakcje z ukrytym niżej obiektem (np. przyciskiem).
Co znajdziesz w tym wpisie
Wartości przyjmowane przez pointer-events
Funkcja pointer-events przyjmuje wartości takie jak:
- none uniemożliwia kliknięcie obiektu, wyłącza wszystkie efekty takie jak :hover
- auto domyślne ustawienie, włącza wszystkie efekty (events), jeżeli rodzic ma ustawioną wartość none a dziecko auto odzyskuje ono domyśle ustawienia
- inherit dziedziczy właściwości elementu nadrzędnego, rodzica
Co nam ona daje? Otwiera przed nami całkiem spore możliwości. Ile razy to zdarzyło się wam, że nie mogliście klikną w strzałki w sliderze bo zasłaniał je inny przezroczysty obiekt. Z tą funkcją bez fizycznych zmian można „wyłączyć ukryty obiekt” i strzałki będą ponownie działały.
pointer-events:none;
Ustawienie to jest dziedziczne. Każdy obiekt w kontenerze z tym ustawieniem będzie nie klikalny. Chyba, że dodamy mu tą funkcjonalność z ustawianiem auto.
pointer-events: auto;
Jak działa pointer-events – przykład
Często przy pracy nad stroną zdarza, się że warstwa wierzchnia blokuje nam efekty elementu znajdującego się pod spodem. Jest to szczególnie częste przy pracy z JavaScript i jego bibliotekami (np. jQuery) kiedy posiadamy np. rozwijane pola, przesuwane pola.
Jak sobie z tym poradzić?
Na początek trzeba ustalić, który element znajduje się nad naszym obiektem. Dla przykładu przyjmijmy, że jest to DIV nad DIV.
Powyższy przykład w HTML wygląda następująco:
<div class="contener-body"> <div class="layer1"></div> <div class="layer2"></div> </div>
Z kolei w CSS przedstawia się tak:
div.contener-body{ position: relative; height: 170px; } .layer1, .layer2 { height: 140px; width: 160px; position: absolute; } .layer1 { background: green; top: 10px; left: 20px; } .layer2 { opacity: 0.7; background: yellow; left: 40px; top: 30px; }
Jak widać na poniższym obrazku zielony kwadrat znajduje się na spodzie. W praktyce oznacza to, że w tym układzie nie możemy na nim wywołać żadnego efektu (przynajmniej na zakrytej przez żółty części).
Teraz zmodyfikujemy kod tak byśmy mogli wywołać prosty efekt np. hover
Jak widać w kodzie HTML nie wprowadzamy żadnych istotnych zmian a jedynie klasę efekt-div
<div class="contener-body efekt-div"> <div class="layer1"></div> <div class="layer2"></div> </div>
Kod CSS
div.contener-body{ position: relative; height: 170px; } .efekt-div .layer1, .efekt-div .layer2 { height: 140px; width: 160px; position: absolute; } .efekt-div .layer1 { background: green; top: 10px; left: 20px; } .efekt-div .layer2 { opacity: 0.7; background: yellow; left: 40px; top: 30px; } .efekt-div .layer1:hover{ background: blue; }
Teraz wyłączymy warstwę przykrywająca:
<div class="contener-body efekt-na-div"> <div class="layer1"></div> <div class="layer2"></div> </div>
CSS
div.contener-body{ position: relative; height: 170px; } .efekt-na-div .layer1, .efekt-na-div .layer2 { height: 140px; width: 160px; position: absolute; } .efekt-na-div .layer1 { background: green; top: 10px; left: 20px; } .efekt-na-div .layer2 { opacity: 0.7; background: yellow; left: 40px; top: 30px; } .efekt-na-div .layer1:hover{ background: blue; } .efekt-na-div .layer2 { pointer-events:none; }
Efekt wyłączenia warstwy przykrywającej uzyskaliśmy dzięki:
pointer-events:none;
Interpretacja przez przeglądarki
Funkcja obsługiwana jest przez przeglądarki:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
TAK | 4.0 | 3.6 | 15.0 | 11+ | TAK | TAK |
Dodatkowe tagi:
Click through a DIV to underlying elements