Pokazivački događaji - CSS-trikovi

pointer-eventsSvojstvo omogućuje nadzor nad HTML elementi odgovoriti na mišu / touch događaji - uključujući i CSS hover / aktivnim stanjima, kliknite / tap događaja u JavaScriptu i da li ili ne kursor vidljiv.

.avoid-clicks ( pointer-events: none; )

Iako pointer-eventssvojstvo uzima jedanaest mogućih vrijednosti, sve osim tri rezervirane su za upotrebu sa SVG-om. Tri valjane vrijednosti za bilo koji HTMl element su:

none sprječava sve opcije klika, stanja i kursora na navedenom HTML elementu
autovraća zadanu funkcionalnost (korisno za upotrebu na podređenim elementima elementa s pointer-events: none;navedenim
inheritkoristit će pointer-eventsvrijednost roditelja elementa

Pogledajte ovu olovku!

Kao što je gore pokazano, glavni je slučaj za pointer-eventsomogućavanje ponašanja klikova ili dodirivanja da "prođe" kroz element do drugog elementa ispod njega na Z osi. Na primjer, ovo bi bilo korisno za grafičke slojeve ili za skrivanje elemenata s opacity(npr. Opisi alata) i još uvijek dopuštajući odabir teksta na sadržaju ispod njega.

Točke interesa

„Korištenje događaja pokazivača u CSS-u za elemente koji nisu SVG eksperimentalno je. Značajka je nekad bila dio specifikacije nacrta CSS3 UI, ali je zbog mnogih otvorenih problema odgođena za CSS4. " - Mozilla MDN
"Ako elementu dodate slušatelj događaja klika, a zatim uklonite stil pokazivačkih događaja (ili promijenite njegovu vrijednost u automatski, događaj klika aktivirat će naznačenu funkcionalnost. U osnovi, događaj klika poštuje vrijednost događaja pokazivača." - David Walsh

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.