Den pointer-eventsegenskab giver mulighed for kontrol over, hvordan HTML-elementer reagere på mus / touch-begivenheder - herunder CSS hover / aktive tilstande, klik / TAP begivenheder i JavaScript, og om markøren er synlig eller ej.
.avoid-clicks ( pointer-events: none; )Mens pointer-eventsejendommen tager elleve mulige værdier, er alle undtagen tre reserveret til brug med SVG. De tre gyldige værdier for ethvert HTMl-element er:
noneforhindrer alle klik-, tilstands- og markørindstillinger på det angivne HTML-elementautogendanner standardfunktionaliteten (nyttig til brug på underordnede elementer i et element medpointer-events: none;specificeretinheritbrugerpointer-eventsværdien af elementets overordnede
Som demonstreret ovenfor er den primære anvendelse for pointer-eventsat tillade klik- eller tapadfærd at "passere" et element til et andet element under det på Z-aksen. For eksempel ville dette være nyttigt til grafiske overlays eller skjule elementer med opacity(f.eks. Værktøjstip) og stadig tillade tekstvalg på indholdet under det.
Interessepunkter
- ”Brugen af pointerhændelser i CSS til ikke-SVG-elementer er eksperimentel. Funktionen plejede at være en del af CSS3 UI-udkastsspecifikationen, men på grund af mange åbne problemer blev den udsat til CSS4. ” - Mozilla MDN
- "Hvis du tilføjer en klikbegivenhedslytter til et element og derefter fjerner markøren-hændelsesstil (eller ændrer dens værdi til automatisk, vil klikhændelsen affyre den udpegede funktionalitet. Dybest set respekterer klikhændelsen markørens begivenhedsværdi." - David Walsh
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.6 | 11 | 12 | 4 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Støtten er lidt dybere i nogle browsere, når den bruges på f.eks. IE 9 understøtter det.