Osoitintapahtumat - CSS-temppuja

pointer-eventsOminaisuus mahdollistaa valvoa miten HTML-elementtien reagoivat hiiren / kosketustapahtumat - kuten CSS Hover / Topiminnassa, klikkaus / tap tapahtumia JavaScript, ja onko kohdistin on näkyvissä.

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

Vaikka pointer-eventsominaisuudella on yksitoista mahdollista arvoa, kaikki kolme lukuun ottamatta on varattu käytettäväksi SVG: n kanssa. Minkä tahansa HTMl-elementin kolme kelvollista arvoa ovat:

none estää kaikki napsautuksen, tilan ja kohdistimen asetukset määritetyssä HTML-elementissä
autopalauttaa oletustoiminnot (hyödyllinen käytettäväksi pointer-events: none;määritetyn parametrin elementin lapsielementeissä
inheritkäyttää pointer-eventselementin vanhemman arvoa

Katso tämä kynä!

Kuten edellä on osoitettu, ensisijainen käyttötapa pointer-eventson antaa napsautus- tai napautumiskäyttäytymisen "kulkea" elementin läpi toiseen sen alapuolella olevaan elementtiin Z-akselilla. Tämä olisi hyödyllistä esimerkiksi graafisille peitteille tai elementtien piilottamiselle opacity(esim. Työkaluvihjeillä) ja sallien silti tekstin valinta sen alla olevaan sisältöön.

Kiinnostavat paikat

"Osoittintapahtumien käyttö CSS: ssä muille kuin SVG-elementeille on kokeellista. Ominaisuus oli aiemmin osa CSS3-käyttöliittymämääritysluonnosta, mutta monien avoimien ongelmien vuoksi se on siirretty CSS4: een. " - Mozilla MDN
"Jos lisäät napsautustapahtumien kuuntelijan elementtiin ja poistat sitten osoitintapahtumien tyylin (tai vaihdat sen arvoksi automaattisen, napsautustapahtuma käynnistää määritetyn toiminnon. Pohjimmiltaan napsautustapahtuma kunnioittaa osoittimen tapahtumien arvoa." - David Walsh

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.