Tässä artikkelissa opimme, kuinka napsautustapahtuma poistetaan käytöstä CSS:n avulla.
Joten, aloitetaan!
Kuinka napsautustapahtuma poistetaan käytöstä CSS:n avulla?
Voit poistaa napsautustapahtumat käytöstä CSS:n avulla osoitin-tapahtumat ” omaisuutta. Mutta hyppäämällä siihen, selitämme sen sinulle lyhyesti.
Mikä on 'osoitintapahtumat' CSS-ominaisuus?
' osoitin-tapahtumat ” ohjaa, miten HTML-elementit reagoivat tai käyttäytyvät kosketustapahtumaan, kuten napsautus- tai napautustapahtumiin, aktiivisiin tai hover-tiloihin ja onko kohdistin näkyvissä vai ei.
Syntaksi
Osoitintapahtumien syntaksi on seuraava:
osoitin-tapahtumat : auto | ei mitään ;
Yllä mainittu ominaisuus ottaa kaksi arvoa, kuten ' auto ' ja ' ei mitään ':
- auto: Sitä käytetään oletustapahtumien suorittamiseen.
- ei mitään: Sitä käytetään tapahtumien poistamiseen.
Huomautus: Alla oleva esimerkki osoittaa ensin, kuinka kaksi aktiivista painiketta lisätään, ja sitten poistamme toisen painikkeen napsautustapahtuman käytöstä.
Esimerkki 1: Painikkeiden napsautustapahtuman poistaminen käytöstä CSS:n avulla
Tässä esimerkissä luomme otsikon
ja kaksi painiketta. Määritä seuraavaksi ' -painiketta ' ensimmäisen painikkeen luokan nimeksi ja määritä ' -painiketta ' ja ' painike 2 ” toisen painikkeen luokat.
HTML
< div >< h1 > Poista CSS:n avulla napsautustapahtuma käytöstä < / h1 >
< -painiketta luokkaa = 'painike' > Ota käyttöön -painike < / -painiketta >
< -painiketta luokkaa = 'painikepainike2' > Poista käytöstä -painike < / -painiketta >
< / div >
CSS:ssä ' .painiketta ' käytetään molempiin HTML-tiedostoon luotuihin painikkeisiin. Aseta seuraavaksi reunuksen tyyliksi ' ei mitään ' ja anna täyte muodossa ' 25px ”. Aseta sen jälkeen painikkeen tekstin väriksi ' rgb(29, 6, 31) ' ja painikkeen tausta ' rgb(19; 192; 163) ”. Asetamme myös painikkeen säteeksi ' 5px ”.
CSS
.painiketta {rajaa : ei mitään ;
pehmuste : 25px ;
väri- : rgb ( 29 , 6 , 31 ) ;
taustaväri : rgb ( 19 , 192 , 163 ) ;
raja-säde : 5px ;
}
Tämän jälkeen käytämme :active pseudo-luokkaa molemmissa painikkeissa nimellä ' .button:aktiivinen ' ja aseta painikkeen väriksi ' rgb(200; 255; 0) ':
.painiketta : aktiivinen {taustaväri : rgb ( 209 , 65 , 65 ) ;
}
Tämän seurauksena näet seuraavan tuloksen:
Nyt siirrymme seuraavaan osaan, jossa poistamme toisen painikkeen napsautustapahtuman käytöstä.
Käytä tätä varten ' .painike2 ' päästäksesi toiseen HTML-tiedostoon luotuun painikkeeseen ja aseta sen jälkeen pointer-events -ominaisuuden arvoksi ' ei mitään ':
.painike2 {osoitin-tapahtumat : ei mitään ;
}
Osoitintapahtumat-ominaisuuden käyttäminen ja sen arvon asettaminen arvoon non poistaa napsautustapahtuman käytöstä, mikä näkyy seuraavassa tulosteessa:
Olemme tarjonneet helpoimman tavan poistaa napsautustapahtuma käytöstä CSS:n avulla.
Johtopäätös
Jos haluat poistaa napsautustapahtuman käytöstä HTML-koodissa, ' osoitin-tapahtumat ” CSS:n omaisuutta käytetään. Tätä tarkoitusta varten lisää HTML-elementti ja aseta pointer-events -ominaisuuden arvoksi ' ei mitään ' poistaa sen napsautustapahtuman käytöstä. Tässä artikkelissa selitettiin, kuinka napsautustapahtuma voidaan poistaa käytöstä CSS:n avulla ja sen esimerkki.