Rodykliniai renginiai - CSS-gudrybės

pointer-eventsNuosavybė leidžia kontroliuoti kaip HTML elementai reaguoti į pelės / touch renginiai - įskaitant CSS / aktyvių narių, spustelėkite / čiaupo įvykių Javascript, ir ar kursorius yra matomas.

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

Nors pointer-eventsnuosavybė turi vienuolika galimų verčių, visos, išskyrus tris, yra rezervuotos naudoti su SVG. Trys galiojančios bet kurio HTMl elemento vertės yra šios:

none apsaugo visas spustelėjimo, būsenos ir žymeklio parinktis nurodytame HTML elemente
autoatkuria numatytąjį funkcionalumą (naudinga naudoti antrojo elemento elementams su pointer-events: none;nurodytu elementu
inheritnaudos pointer-eventselemento pirminio vertę

Patikrinkite šį rašiklį!

Kaip parodyta aukščiau, pagrindinis naudojimo atvejis pointer-eventsyra leisti paspaudimo ar bakstelėjimo elgesiui „pereiti“ elementą į kitą elementą, esantį žemiau jo Z ašyje. Pavyzdžiui, tai būtų naudinga grafinėms perdangoms arba elementų slėpimui opacity(pvz., Patarimais) ir vis tiek leidžiant pasirinkti tekstą po juo esančiame turinyje.

Lankytinos vietos

„Rodyklinių įvykių naudojimas CSS ne SVG elementams yra eksperimentinis. Anksčiau ši funkcija buvo CSS3 vartotojo sąsajos projekto specifikacijos dalis, tačiau dėl daugybės neišspręstų problemų buvo atidėta CSS4. “ - „Mozilla MDN“
"Jei prie elemento pridėsite paspaudimo įvykio klausytoją, tada pašalinkite žymeklio įvykių stilių (arba pakeisite jo vertę į automatinę, paspaudimo įvykis suaktyvins nurodytą funkciją. Iš esmės paspaudimo įvykis gerbia rodyklės įvykių vertę." - Davidas Walshas

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.