V tem članku se bomo naučili, kako onemogočiti dogodek klika s pomočjo CSS.

Torej, začnimo!

Kako onemogočiti dogodek klika s pomočjo CSS?

Dogodke klikov lahko onemogočite s pomočjo CSS-ja kazalec-dogodki ” lastnina. Toda ko skočimo v to, vam bomo to na kratko razložili.

Kaj je lastnost CSS »pointer-events«?

' kazalec-dogodki ” nadzorujejo, kako se elementi HTML odzivajo ali obnašajo na dogodek dotika, kot so dogodki klikanja ali tapkanja, aktivna stanja ali stanja lebdenja in ali je kazalec viden ali ne.

Sintaksa
Sintaksa kazalnih dogodkov je naslednja:

Zgornja omenjena lastnost ima dve vrednosti, kot je ' avto « in » nič ”:

• avto: Uporablja se za izvajanje privzetih dogodkov.
• nič: Uporablja se za onemogočanje dogodkov.

Opomba: Spodnji primer bo najprej pokazal, kako dodati dva aktivna gumba, nato pa bomo onemogočili dogodek klika drugega gumba.

Primer 1: onemogočanje dogodka klika gumbov s CSS
V tem primeru bomo ustvarili naslov

in dva gumba. Nato določite » gumb ' kot ime razreda prvega gumba in dodelite ' gumb « in » gumb2 ” kot razrede drugega gumba.

HTML

< div >
< h1 > Onemogoči dogodek klika z uporabo CSS < / h1 >
< gumb razred = 'gumb' > Omogoči gumb < / gumb >
< gumb razred = 'gumb gumb2' > Onemogoči gumb < / gumb >
< / div >

V CSS, ' .gumb ” se uporablja za dostop do obeh gumbov, ustvarjenih v datoteki HTML. Nato nastavite slog obrobe kot ' nič « in podajte oblazinjenje kot » 25 slikovnih pik ”. Nato nastavite barvo besedila gumba kot ' rgb(29, 6, 31) « in ozadje gumba kot » rgb(19, 192, 163) ”. Nastavili bomo tudi polmer gumba kot ' 5px ”.

CSS

.gumb {
meja : nič ;
oblazinjenje : 25 slikovnih pik ;
barva : rgb ( 29 , 6 , 31 ) ;
Barva ozadja : rgb ( 19 , 192 , 163 ) ;
mejni polmer : 5px ;
}

Po tem bomo uporabili psevdorazred :active na obeh gumbih kot ' .button:aktivno « in nastavite barvo gumba kot » rgb(200, 255, 0) ”:

.gumb : aktivna {
Barva ozadja : rgb ( 209 , 65 , 65 ) ;
}

Posledično boste videli naslednji rezultat:

Zdaj se bomo premaknili na naslednji del, v katerem bomo onemogočili dogodek klika za drugi gumb.

Če želite to narediti, uporabite » .button2 « za dostop do drugega gumba, ustvarjenega v datoteki HTML, in po tem nastavite vrednost lastnosti pointer-events kot » nič ”:

.button2 {
kazalec-dogodki : nič ;
}

Če uporabite lastnost pointer-events in nastavite njeno vrednost na non, boste onemogočili dogodek klika, kar lahko vidite v naslednjem izhodu:

Zagotovili smo najlažji način za onemogočanje dogodka klika s pomočjo CSS.

Zaključek

Če želite onemogočiti dogodek klika v HTML, uporabite » kazalec-dogodki ” se uporablja lastnost CSS. V ta namen dodajte element HTML in nastavite vrednost lastnosti pointer-events kot ' nič «, da onemogočite dogodek klika. V tem članku je skupaj z njegovim primerom razloženo, kako onemogočiti dogodek klika s pomočjo CSS.