Udalosti ukazovateľa - Triky CSS

Táto pointer-eventsvlastnosť umožňuje kontrolu nad tým, ako prvky HTML reagujú na udalosti myšou / dotykom - vrátane stavov umiestnenia kurzora myši / aktívneho stavu CSS, udalostí kliknutia / klepnutia v Javascripti a toho, či je kurzor viditeľný alebo nie.

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

Zatiaľ čo pointer-eventsvlastnosť nadobúda jedenásť možných hodnôt, všetky okrem troch sú vyhradené na použitie so SVG. Tri platné hodnoty pre akýkoľvek prvok HTMl sú:

none zabráni všetkým možnostiam kliknutia, stavu a kurzora na zadanom prvku HTML
autoobnoví predvolenú funkčnosť (užitočné pri použití na podradených prvkoch prvku so pointer-events: none;zadaným
inheritpoužije pointer-eventshodnotu rodiča prvku

Vyskúšajte toto pero!

Ako je uvedené vyššie, hlavným prípadom použitia pointer-eventsje umožnenie chovania kliknutím alebo klepnutím „prejsť“ prvkom k ďalšiemu prvku pod ním na osi Z. Bolo by to užitočné napríklad pre grafické prekrytia alebo na skrytie prvkov s opacity(napr. Popiskami) a stále umožňujúcich výber textu na obsahu pod ním.

Body záujmu

„Použitie ukazovateľových udalostí v CSS pre prvky, ktoré nie sú SVG, je experimentálne. Táto funkcia bývala súčasťou špecifikácie návrhu používateľského rozhrania CSS3, ale kvôli mnohým otvoreným problémom bola odložená na CSS4. “ - Mozilla MDN
"Ak pridáte poslucháča udalosti kliknutia k prvku a potom odstránite štýl udalostí ukazovateľa (alebo zmeníte jeho hodnotu na automatickú, udalosť kliknutia vystrelí určenú funkčnosť. Udalosť kliknutia v zásade rešpektuje hodnotu udalostí ukazovateľa." - David Walsh

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.