Pekarehändelser - CSS-tricks | CSS Almanack 2025

Den pointer-eventsegenskapen kan för kontroll över hur HTML-element svarar på mus / beröringshändelser - inklusive CSS sväva / aktiva stater, klick / TAP händelser i Javascript och om markören är synlig eller inte.

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

Medan pointer-eventsegenskapen tar elva möjliga värden, alla utom tre av dem är reserverade för användning med SVG. De tre giltiga värdena för alla HTMl-element är:

none förhindrar alla klick-, tillstånds- och marköralternativ på det angivna HTML-elementet
autoåterställer standardfunktionen (användbar för användning på underordnade element i ett element med pointer-events: none;specificerat
inheritanvänder pointer-eventsvärdet på elementets förälder

Kolla in den här pennan!

Som visas ovan är det främsta användningsfallet pointer-eventsatt låta klick- eller tryckbeteende "passera" ett element till ett annat element under det på Z-axeln. Till exempel skulle detta vara användbart för grafiska överlägg eller för att dölja element med opacity(t.ex. verktygstips) och ändå tillåta textval på innehållet under det.

Intressanta platser

”Användningen av pekarehändelser i CSS för icke-SVG-element är experimentell. Funktionen brukade vara en del av CSS3 UI-utkastsspecifikationen, men på grund av många öppna problem har den skjutits upp till CSS4. ” - Mozilla MDN
"Om du lägger till en klickhändelselyssnare till ett element, tar sedan bort pekaren-händelsestilen (eller ändrar dess värde till auto, klickhändelsen aktiverar den angivna funktionaliteten. I grund och botten respekterar klickhändelsen pekarens händelsevärde." - David Walsh

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.