În acest articol, vom afla cum să dezactivați evenimentul de clic folosind CSS.

Asadar, hai sa incepem!

Cum să dezactivezi evenimentul de clic folosind CSS?

Puteți dezactiva evenimentele de clic folosind CSS „ pointer-evenimente ” proprietate. Dar, sărind în ea, vă vom explica pe scurt.

Ce este proprietatea CSS „pointer-events”?

„ pointer-evenimente ” controlează modul în care elementele HTML răspund sau se comportă la evenimentul tactil, cum ar fi evenimentele de clic sau atingere, stările active sau de trecere cu mouse-ul și dacă cursorul este vizibil sau nu.

Sintaxă
Sintaxa evenimentelor pointer este următoarea:

Proprietatea menționată mai sus are două valori, cum ar fi „ auto ' și ' nici unul ”:

• auto: Este folosit pentru a efectua evenimente implicite.
• nici unul: Este folosit pentru a dezactiva evenimente.

Notă: Exemplul de mai jos va demonstra mai întâi cum să adăugați două butoane active, apoi vom dezactiva evenimentul de clic al celui de-al doilea buton.

Exemplul 1: Dezactivarea evenimentului clic al butoanelor folosind CSS
În acest exemplu, vom crea un titlu

și două butoane. Apoi, specificați „ buton ” ca numele clasei primului buton și atribuiți „ buton ' și ' butonul 2 ” ca clasele celui de-al doilea buton.

HTML

< div >
< h1 > Dezactivați evenimentul de clic folosind CSS < / h1 >
< buton clasă = 'buton' > Butonul de activare < / buton >
< buton clasă = „buton buton2” > Butonul de dezactivare < / buton >
< / div >

În CSS, „ .buton ” este folosit pentru a accesa ambele butoane create în fișierul HTML. Apoi, setați stilul de chenar ca „ nici unul ” și dați umplutură ca „ 25px ”. După aceea, setați culoarea textului butonului ca „ rgb(29, 6, 31) ” și fundalul butonului ca „ rgb(19, 192, 163) ”. De asemenea, vom seta raza unui buton ca „ 5px ”.

CSS

.buton {
frontieră : nici unul ;
căptușeală : 25px ;
culoare : rgb ( 29 , 6 , 31 ) ;
culoare de fundal : rgb ( 19 , 192 , 163 ) ;
hotar-raza : 5px ;
}

După aceea, vom aplica pseudo-clasa :active pe ambele butoane ca „ .buton:activ ” și setați culoarea butonului ca „ rgb(200, 255, 0) ”:

.buton : activ {
culoare de fundal : rgb ( 209 , 65 , 65 ) ;
}

Ca urmare, veți vedea următorul rezultat:

Acum, vom trece la următoarea parte în care vom dezactiva evenimentul de clic pentru al doilea buton.

Pentru a face acest lucru, utilizați „ .butonul2 ” pentru a accesa al doilea buton, creat în fișierul HTML și, după aceea, setați valoarea proprietății pointer-events ca „ nici unul ”:

.butonul2 {
pointer-evenimente : nici unul ;
}

Utilizarea proprietății pointer-events și setarea valorii acesteia la non va dezactiva evenimentul clic, care poate fi văzut în următoarea ieșire:

Am oferit cea mai simplă metodă de dezactivare a evenimentului de clic folosind CSS.

Concluzie

Pentru a dezactiva evenimentul clic în HTML, „ pointer-evenimente ” este folosită proprietatea CSS. În acest scop, adăugați un element HTML și setați valoarea proprietății pointer-events ca „ nici unul ” pentru a dezactiva evenimentul de clic. Acest articol a explicat cum să dezactivați evenimentul de clic folosind CSS împreună cu exemplul său.