Den pointer-eventsegenskapen gjør for kontroll over hvordan HTML-elementer reagerer på mus / berørings hendelser - inkludert CSS hover / aktive stater, klikk / trykk hendelser i Javascript, og hvorvidt markøren er synlig.
.avoid-clicks ( pointer-events: none; )Mens pointer-eventseiendommen tar elleve mulige verdier, er alle unntatt dem reservert for bruk med SVG. De tre gyldige verdiene for ethvert HTMl-element er:
noneforhindrer alle klikk-, status- og markøralternativer på det angitte HTML-elementetautogjenoppretter standardfunksjonaliteten (nyttig for bruk på underordnede elementer i et element medpointer-events: none;spesifisertinheritvil brukepointer-eventsverdien til elementets foreldre
Som vist ovenfor, er det viktigste bruksområdet pointer-eventså la klikk- eller trykkadferd "passere" et element til et annet element under det på Z-aksen. For eksempel vil dette være nyttig for grafiske overlegg, eller skjule elementer med opacity(f.eks. Verktøytips) og fremdeles tillate tekstvalg på innholdet under det.
Interessepunkt
- “Bruken av pekerhendelser i CSS for ikke-SVG-elementer er eksperimentell. Funksjonen pleide å være en del av CSS3 UI-utkastsspesifikasjonen, men på grunn av mange åpne problemer ble den utsatt til CSS4. ” - Mozilla MDN
- "Hvis du legger til en klikkbegivenhetslytter til et element, og deretter fjerner pekerhendelsestilen (eller endrer verdien til automatisk, vil klikkhendelsen utløse den angitte funksjonaliteten. I utgangspunktet respekterer klikkhendelsen pekerhendelsesverdien." David Walsh
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 | 3.6 | 11 | 12 | 4 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Støtten er litt dypere i noen nettlesere når den brukes på for eksempel IE 9 støtter det.