Dans cet article, nous allons apprendre à désactiver l'événement de clic à l'aide de CSS.

Alors, commençons !

Comment désactiver l'événement de clic à l'aide de CSS ?

Vous pouvez désactiver les événements de clic à l'aide du CSS ' événements-pointeur ' propriété. Mais, en sautant dedans, nous vous l'expliquerons brièvement.

Qu'est-ce que la propriété CSS 'pointer-events' ?

La ' événements-pointeur ” contrôlent la façon dont les éléments HTML répondent ou se comportent à l'événement tactile, tels que les événements de clic ou de pression, les états actifs ou de survol, et si le curseur est visible ou non.

Syntaxe
La syntaxe des événements de pointeur est la suivante :

La propriété mentionnée ci-dessus prend deux valeurs, telles que ' auto ' et ' rien ” :

• auto: Il est utilisé pour effectuer des événements par défaut.
• rien: Il est utilisé pour désactiver les événements.

Remarque : L'exemple ci-dessous montrera d'abord comment ajouter deux boutons actifs, puis nous désactiverons l'événement de clic du deuxième bouton.

Exemple 1 : Désactivation de l'événement de clic des boutons à l'aide de CSS
Dans cet exemple, nous allons créer un titre

et deux boutons. Ensuite, spécifiez le ' bouton ' comme nom de classe du premier bouton, et affectez ' bouton ' et ' bouton2 ” comme classes du second bouton.

HTML

< div >
< h1 > Désactiver l'événement de clic à l'aide de CSS < / h1 >
< bouton classer = 'bouton' > Activer le bouton < / bouton >
< bouton classer = 'bouton bouton2' > Désactiver le bouton < / bouton >
< / div >

En CSS, ' .bouton ” permet d'accéder aux deux boutons créés dans le fichier HTML. Ensuite, définissez le style de bordure sur ' rien ' et donner un rembourrage comme ' 25px ”. Après cela, définissez la couleur du texte du bouton sur ' RVB(29, 6, 31) ' et l'arrière-plan du bouton comme ' RVB (19, 192, 163) ”. Nous définirons également le rayon d'un bouton comme ' 5px ”.

CSS

.bouton {
frontière : rien ;
rembourrage : 25px ;
Couleur : RVB ( 29 , 6 , 31 ) ;
Couleur de l'arrière plan : RVB ( 19 , 192 , 163 ) ;
rayon de bordure : 5px ;
}

Après cela, nous appliquerons la pseudo-classe :active sur les deux boutons comme ' .bouton :actif ' et définissez la couleur du bouton sur ' RVB(200, 255, 0) ” :

.bouton : actif {
Couleur de l'arrière plan : RVB ( 209 , 65 , 65 ) ;
}

En conséquence, vous verrez le résultat suivant :

Maintenant, nous allons passer à la partie suivante dans laquelle nous désactiverons l'événement de clic pour le deuxième bouton.

Pour ce faire, utilisez ' .bouton2 ' pour accéder au deuxième bouton, créé dans le fichier HTML, puis définissez la valeur de la propriété pointer-events sur ' rien ” :

.bouton2 {
événements-pointeur : rien ;
}

L'utilisation de la propriété pointer-events et la définition de sa valeur sur non désactiveront l'événement click, ce qui peut être vu dans la sortie suivante :

Nous avons fourni la méthode la plus simple pour désactiver l'événement de clic à l'aide de CSS.

Conclusion

Pour désactiver l'événement de clic en HTML, le ' événements-pointeur ” la propriété CSS est utilisée. Pour cela, ajoutez un élément HTML et définissez la valeur de la propriété pointer-events sur ' rien ” pour désactiver son événement de clic. Cet article explique comment désactiver l'événement de clic à l'aide de CSS avec son exemple.