U ovom ćemo članku naučiti kako onemogućiti događaj klika pomoću CSS-a.

Dakle, počnimo!

Kako onemogućiti događaj klika pomoću CSS-a?

Događaje klikova možete onemogućiti pomoću CSS-a ' pokazivač-događaji ” vlasništvo. Ali, uskačući u to, mi ćemo vam to ukratko objasniti.

Što je svojstvo CSS-a “pointer-events”?

' pokazivač-događaji ” kontroliraju kako HTML elementi reagiraju ili se ponašaju na događaj dodira, kao što su događaji klika ili dodira, aktivna stanja ili stanja lebdenja te je li kursor vidljiv ili ne.

Sintaksa
Sintaksa događaja pokazivača je sljedeća:

Gore spomenuto svojstvo ima dvije vrijednosti, kao što je ' auto ' i ' nikakav ”:

• auto: Koristi se za izvođenje zadanih događaja.
• nijedan: Koristi se za onemogućavanje događaja.

Napomena: Donji primjer će prvo pokazati kako dodati dva aktivna gumba, a zatim ćemo onemogućiti događaj klika drugog gumba.

Primjer 1: Onemogućavanje događaja klika gumba pomoću CSS-a
U ovom primjeru stvorit ćemo naslov

i dva gumba. Zatim navedite ' dugme ” kao naziv klase prvog gumba i dodijelite “ dugme ' i ' gumb2 ” kao klase drugog gumba.

HTML

< div >
< h1 > Onemogući događaj klika pomoću CSS-a < / h1 >
< dugme razreda = 'dugme' > Omogući gumb < / dugme >
< dugme razreda = 'gumb gumb2' > Onemogući gumb < / dugme >
< / div >

U CSS-u, ' .dugme ” koristi se za pristup oba gumba stvorena u HTML datoteci. Zatim postavite stil obruba kao ' nikakav ' i dajte ispunu kao ' 25 px ”. Nakon toga postavite boju teksta gumba kao ' rgb(29, 6, 31) ', a pozadinu gumba kao ' rgb(19, 192, 163) ”. Također ćemo postaviti radijus gumba kao ' 5 px ”.

CSS

.dugme {
granica : nikakav ;
podstava : 25 px ;
boja : rgb ( 29 , 6 , 31 ) ;
boja pozadine : rgb ( 19 , 192 , 163 ) ;
granični radijus : 5 px ;
}

Nakon toga, primijenit ćemo pseudoklasu :active na oba gumba kao ' .gumb:aktivan ' i postavite boju gumba kao ' rgb(200, 255, 0) ”:

.dugme : aktivan {
boja pozadine : rgb ( 209 , 65 , 65 ) ;
}

Kao rezultat, vidjet ćete sljedeći ishod:

Sada ćemo prijeći na sljedeći dio u kojem ćemo onemogućiti događaj klika za drugi gumb.

Da biste to učinili, koristite ' .gumb2 ” za pristup drugom gumbu, kreiranom u HTML datoteci, a nakon toga postavite vrijednost svojstva pointer-events kao “ nikakav ”:

.gumb2 {
pokazivač-događaji : nikakav ;
}

Korištenje svojstva pointer-events i postavljanje njegove vrijednosti na non onemogućit će događaj klika, što se može vidjeti u sljedećem izlazu:

Pružili smo najlakši način za onemogućavanje događaja klika pomoću CSS-a.

Zaključak

Da biste onemogućili događaj klika u HTML-u, ' pokazivač-događaji ” koristi se svojstvo CSS-a. U tu svrhu dodajte HTML element i postavite vrijednost svojstva pointer-events kao ' nikakav ” da biste onemogućili njegov događaj klika. U ovom je članku objašnjeno kako onemogućiti događaj klika pomoću CSS-a zajedno s njegovim primjerom.