Zdarzenia myszki – pointer-events CSS

kursy tutoriale

Kategoria wpisu Kurs HTML Tagi: , , , , on przez .



Właściwość pointer-events określa jak na dane zdarzenie wywołane z użyciem kursora myszy powinien reagować konkretny obiekt HTML.
Chodzi o zdarzenia takie jak:

  • kliknięcie na obszar elementu HTML
  • najechanie kursorem na obszar elementu HTML
  • dotknięcie elementu HTML na ekranie dotykowym bez użycia myszki

Jak działa pointer-events

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:

Z kolei w CSS przedstawia się tak:

 

Jak widać zielony element znajduje się na spodzie oznacza to, że w tym układzie nie możemy na nim wywołać żadnego efektu (przynajmniej na zakrytej części).

Teraz zmodyfikujemy kod tak byśmy mogli wywołać prosty efekt np. hover

W HTML

Kod CSS

Teraz wyłączymy warstwę przykrywająca:

CSS

Efekt wyłączenia warstwy przykrywającej uzyskaliśmy dzięki:

Funkcja pointer-events posiada następujące właściwości:

  • 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

Funkcja obsługiwana jest przez przeglądarki:

ChromeSafariFirefoxOperaIEAndroidiOS
TAK4.03.615.011+TAKTAK

Dodatkowe tagi:
Click through a DIV to underlying elements

Przeczytaj również

Przekreślenie Tekstu HTML/CSS W HTML istnieje kilka metod służących do przekreślania tekstu  i . Między oboma sposobami przekreślenia istnieją pewne różnice ...
Odsyłacz pocztowy lub do telefonu HTML Jeśli chcesz na swojej stronie umieścić adres e-mail, po kliknięciu którego otworzy się program pocztowy to doskonałym rozwiązaniem dla będzie użycie ...
Nagłówki i podział tekstu w plikach stron WWW Jak każdy wie tekst na stronach WWW zapisujemy nieco inaczej niż na kartce papieru. Przypomina to bardziej edycję tekstu w notatniku lub w innym edyto...
Indeks Górny i Dolny w HTML i/lub CSS W języku skryptowym HTML jak i w CSS bardzo łatwo uzyskać jest efekt mniejszego tekstu u góry (indeks górny) lub dołu normalnego (indeks dolny). I...