Napsautustapahtuman poistaminen käytöstä CSS:n avulla

Napsautustapahtuman Poistaminen Kaytosta Css N Avulla



Painikkeita käytetään yleensä tietyn toiminnon suorittamiseen. Esimerkiksi kun napsautat lisättyä painiketta, se käynnistää tietyn tapahtuman. CSS:n avulla voimme poistaa napsautustapahtuman käytöstä. Joten jos haluat poistaa napsautustapahtuman käytöstä, lisää osoitintapahtuma CSS:ään ja aseta sen arvo vaatimusten mukaisesti.

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.