In questo articolo impareremo come disabilitare l'evento click usando i CSS.

Quindi iniziamo!

Come disabilitare l'evento clic utilizzando CSS?

Puoi disabilitare gli eventi di clic utilizzando il CSS ' eventi-puntatore ' proprietà. Ma, saltandoci dentro, te lo spiegheremo brevemente.

Che cos'è la proprietà CSS 'pointer-events'?

Il ' eventi-puntatore ” controlla come gli elementi HTML rispondono o si comportano all'evento tocco, come eventi clic o tocco, stati attivi o al passaggio del mouse e se il cursore è visibile o meno.

Sintassi
La sintassi di pointer-events è la seguente:

La proprietà di cui sopra assume due valori, come “ auto ' e ' nessuno ”:

• auto: Viene utilizzato per eseguire eventi predefiniti.
• nessuno: Viene utilizzato per disabilitare gli eventi.

Nota: l'esempio riportato di seguito mostrerà innanzitutto come aggiungere due pulsanti attivi, quindi disabiliteremo l'evento clic del secondo pulsante.

Esempio 1: disabilitazione dell'evento clic dei pulsanti tramite CSS
In questo esempio creeremo un'intestazione

e due pulsanti. Quindi, specifica il ' pulsante ” come nome della classe del primo pulsante e assegna “ pulsante ' e ' pulsante2 ” come le classi del secondo pulsante.

HTML

< div >
< h1 > Disabilita l'evento Click tramite CSS < / h1 >
< pulsante classe = 'pulsante' > Pulsante Abilita < / pulsante >
< pulsante classe = 'pulsante button2' > Pulsante Disabilita < / pulsante >
< / div >

In CSS, “ .pulsante ” viene utilizzato per accedere a entrambi i pulsanti creati nel file HTML. Quindi, imposta lo stile del bordo come ' nessuno ' e dare imbottitura come ' 25px ”. Successivamente, imposta il colore del testo del pulsante come ' RGB(29, 6, 31) ” e lo sfondo del pulsante come “ RGB(19, 192, 163) ”. Imposteremo anche il raggio di un pulsante come ' 5px ”.

CSS

.pulsante {
confine : nessuno ;
imbottitura : 25px ;
colore : rgb ( 29 , 6 , 31 ) ;
colore di sfondo : rgb ( 19 , 192 , 163 ) ;
raggio di confine : 5px ;
}

Successivamente, applicheremo la pseudo-classe :active su entrambi i pulsanti come ' .pulsante: attivo ” e imposta il colore del pulsante come “ RGB(200, 255, 0) ”:

.pulsante : attivo {
colore di sfondo : rgb ( 209 , 65 , 65 ) ;
}

Di conseguenza, vedrai il seguente risultato:

Ora passeremo alla parte successiva in cui disabiliteremo l'evento clic per il secondo pulsante.

Per farlo, usa “ .pulsante2 ” per accedere al secondo pulsante, creato nel file HTML, e successivamente, impostare il valore della proprietà pointer-events come “ nessuno ”:

.pulsante2 {
eventi-puntatore : nessuno ;
}

L'utilizzo della proprietà pointer-events e l'impostazione del suo valore su non disabiliteranno l'evento click, che può essere visualizzato nel seguente output:

Abbiamo fornito il metodo più semplice per disabilitare l'evento click tramite CSS.

Conclusione

Per disabilitare l'evento click in HTML, il ' eventi-puntatore ” viene utilizzata la proprietà CSS. A tale scopo, aggiungi un elemento HTML e imposta il valore della proprietà pointer-events come ' nessuno ” per disabilitare il relativo evento clic. Questo articolo ha spiegato come disabilitare l'evento click utilizzando CSS insieme al suo esempio.