En aquest article, aprendrem a desactivar l'esdeveniment de clic mitjançant CSS.

Així doncs, comencem!

Com desactivar l'esdeveniment de clic mitjançant CSS?

Podeu desactivar els esdeveniments de clic mitjançant el CSS ' esdeveniments de punter ' propietat. Però, saltant-hi, us ho explicarem breument.

Què és la propietat CSS 'pointer-events'?

El ' esdeveniments de punter ” controla com responen o es comporten els elements HTML davant l'esdeveniment tàctil, com ara esdeveniments de clic o toc, estats actius o de desplaçament, i si el cursor és visible o no.

Sintaxi
La sintaxi dels esdeveniments de punter és la següent:

La propietat esmentada anteriorment pren dos valors, com ara ' automàtic ' i ' cap ”:

• automàtic: S'utilitza per realitzar esdeveniments predeterminats.
• cap: S'utilitza per desactivar esdeveniments.

Nota: l'exemple que es mostra a continuació mostrarà primer com afegir dos botons actius i, a continuació, desactivarem l'esdeveniment de clic del segon botó.

Exemple 1: desactivació de l'esdeveniment de clic dels botons mitjançant CSS
En aquest exemple, crearem un encapçalament

i dos botons. A continuació, especifiqueu el ' botó ” com a nom de classe del primer botó i assigneu “ botó ' i ' botó 2 ” com les classes del segon botó.

HTML

< div >
< h1 > Desactiva l'esdeveniment de clic mitjançant CSS < / h1 >
< botó classe = 'botó' > Botó Habilita < / botó >
< botó classe = 'botó botó 2' > Botó Desactivar < / botó >
< / div >

En CSS, ' .botó ” s'utilitza per accedir als dos botons creats al fitxer HTML. A continuació, configureu l'estil de la vora com a ' cap ' i doneu el farciment com ' 25 píxels ”. Després d'això, establiu el color del text del botó com a ' rgb(29, 6, 31) ' i el fons del botó com ' rgb(19, 192, 163) ”. També establirem el radi d'un botó com ' 5 píxels ”.

CSS

.botó {
frontera : cap ;
farciment : 25 píxels ;
color : rgb ( 29 , 6 , 31 ) ;
color de fons : rgb ( 19 , 192 , 163 ) ;
frontera-radi : 5 píxels ;
}

Després d'això, aplicarem la pseudoclasse :active als dos botons com a ' .botó:actiu ” i establiu el color del botó com a “ rgb(200, 255, 0) ”:

.botó : actiu {
color de fons : rgb ( 209 , 65 , 65 ) ;
}

Com a resultat, veureu el següent resultat:

Ara, passarem a la següent part en què desactivarem l'esdeveniment de clic per al segon botó.

Per fer-ho, utilitzeu ' .botó2 ” per accedir al segon botó, creat al fitxer HTML, i després, establiu el valor de la propietat d'esdeveniments de punter com a “ cap ”:

.botó2 {
esdeveniments de punter : cap ;
}

Si feu servir la propietat pointer-events i establiu el seu valor a non, es desactivarà l'esdeveniment de clic, que es pot veure a la sortida següent:

Hem proporcionat el mètode més fàcil per desactivar l'esdeveniment de clic mitjançant CSS.

Conclusió

Per desactivar l'esdeveniment de clic en HTML, el ' esdeveniments de punter S'utilitza la propietat de CSS. Amb aquest propòsit, afegiu un element HTML i establiu el valor de la propietat d'esdeveniments de punter com a ' cap ” per desactivar el seu esdeveniment de clic. En aquest article s'explica com desactivar l'esdeveniment de clic mitjançant CSS juntament amb el seu exemple.