pointer-eventsVara võimaldab kontrolli selle üle, kuidas HTML elemendid reageerivad hiire / puutesündmused - sealhulgas CSS hover / aktiivne Ühendriigid, kliki / koputage sündmused Javascript, ja kas kursor on nähtav.
.avoid-clicks ( pointer-events: none; )Kui pointer-eventsvara võtab üksteist võimalikku väärtust, on kõik peale kolme neist reserveeritud kasutamiseks SVG-ga. Mis tahes HTMl-elemendi kolm kehtivat väärtust on:
nonetakistab kõiki HTML-elemendi kõiki klõpsu-, oleku- ja kursorivalikuidautotaastab vaikimisi funktsionaalsust (kasulik kasutamiseks lapse elemendid elementpointer-events: none;täpsustatudinheritkasutabpointer-eventselemendi vanema väärtust
Nagu ülalpool näidatud, on esmatähtsaks kasutuseks pointer-eventsklõpsamise või koputamise käitumise võimaldamine elemendi Z-teljel selle teise elemendi läbimiseks. Näiteks oleks see kasulik graafiliste ülekatete või elementide opacity(nt näpunäidete) peitmise korral ja selle all oleva sisu siiski tekstivaliku lubamiseks.
Huvipunktid
- „Osutussündmuste kasutamine CSS-is SVG-väliste elementide jaoks on eksperimentaalne. Varem oli see funktsioon CSS3 kasutajaliidese spetsifikatsiooni osa, kuid paljude lahtiste probleemide tõttu on see CSS4-le edasi lükatud. " - Mozilla MDN
- "Kui lisate elemendile klikisündmuste kuulaja, siis eemaldage kursori-sündmuste stiil (või muutke selle väärtuseks automaatne, käivitab kliki sündmus määratud funktsionaalsuse. Põhimõtteliselt austab kliki sündmus kursori-sündmuste väärtust." - David Walsh
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 3.6 | 11 | 12 | 4 |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Tugi on mõnes brauseris veidi sügavam, kui seda kasutatakse näiteks IE 9-s.