Pointer-evenementen - CSS-trucs

De pointer-eventseigenschap biedt controle over hoe HTML-elementen reageren op muis- / aanraakgebeurtenissen - inclusief CSS hover / actieve statussen, klik / tik-gebeurtenissen in Javascript en of de cursor al dan niet zichtbaar is.

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

Hoewel de pointer-eventseigenschap elf mogelijke waarden aanneemt, zijn ze op drie na gereserveerd voor gebruik met SVG. De drie geldige waarden voor elk HTMl-element zijn:

none voorkomt alle klik-, status- en cursoropties op het opgegeven HTML-element
autoherstelt de standaardfunctionaliteit (handig voor gebruik op onderliggende elementen van een element met pointer-events: none;gespecificeerd
inheritgebruikt de pointer-eventswaarde van de ouder van het element

Kijk eens naar deze pen!

Zoals hierboven is aangetoond, is de belangrijkste use-case pointer-eventshet toestaan dat klik- of tikgedrag door een element naar een ander element eronder op de Z-as gaat. Dit zou bijvoorbeeld handig zijn voor grafische overlays, of het verbergen van elementen met opacity(bijv. Tooltips) en nog steeds tekstselectie toestaan op de inhoud eronder.

Nuttige Plaatsen

“Het gebruik van pointer-events in CSS voor niet-SVG-elementen is experimenteel. De functie maakte vroeger deel uit van de CSS3 UI-conceptspecificatie, maar is vanwege veel openstaande problemen uitgesteld naar CSS4. " - Mozilla MDN
"Als je een klikgebeurtenis-luisteraar aan een element toevoegt, verwijder dan de pointer-events-stijl (of verander de waarde naar auto, dan zal de click-gebeurtenis de aangewezen functionaliteit activeren. In feite respecteert de click-gebeurtenis de pointer-events-waarde." - David Walsh

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.