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).

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

&nbsp;
<div class="layer1"></div>
&nbsp;
<div class="layer2"></div>
&nbsp;

</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:

Dodatkowe tagi:
Click through a DIV to underlying elements