Les boutons sont généralement utilisés pour effectuer une action spécifique. Par exemple, lorsque vous cliquez sur le bouton ajouté, il déclenchera un certain événement. CSS nous permet de désactiver l'événement de clic. Donc, si vous souhaitez désactiver l'événement de clic, ajoutez un événement de pointeur dans CSS et définissez sa valeur en fonction des exigences.

Dans cet article, nous apprendrons à 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 de pointeur" propriété. Mais, sautant dedans, nous vous l'expliquerons brièvement.

Qu'est-ce que la propriété CSS «Pointer-Events»?

Le "événements de pointeur"Contrôlez comment les éléments HTML réagissent ou se comportent à l'événement tactile, tels que des événements de clic ou de tapotement, des états actifs ou de survol, et si le curseur est visible ou non.

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

Pointer-Events: Auto | Aucun;

La propriété de mention ci-dessus prend deux valeurs, telles que «auto" et "aucun»:

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

Remarque: L'exemple de dix ans 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 clics de boutons à l'aide de CSS
Dans cet exemple, nous créerons un titre

et deux boutons. Ensuite, spécifiez le «bouton"Comme nom de classe du premier bouton et attribuez"bouton" et "Button2«Comme les classes du deuxième bouton.

Html

Désactiver l'événement de clic à l'aide de CSS

Bouton d'activation
Bouton désactiver

Dans CSS, ".bouton»Est utilisé pour accéder aux deux boutons créés dans le fichier html. Ensuite, définissez le style de bordure comme «aucun"Et donnez un rembourrage comme"25px". Après cela, définissez la couleur du texte du bouton comme «RVB (29, 6, 31)"Et le fond du bouton comme"RVB (19, 192, 163)". Nous allons également définir le rayon d'un bouton comme «5px".

CSS

.bouton
Border: aucun;
rembourrage: 25px;
Couleur: RVB (29, 6, 31);
Color en arrière-plan: RVB (19, 192, 163);
Border-Radius: 5px;

Après cela, nous appliquerons le: pseudo-classe actif sur les deux boutons comme «.bouton: actif»Et définissez la couleur du bouton comme«RVB (200, 255, 0)»:

.bouton: actif
Color en 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 click pour le deuxième bouton.

Pour ce faire, utilisez ".Button2«Pour accéder au deuxième bouton, créé dans le fichier HTML, et après cela, définissez la valeur de la propriété Pointer-Events comme«aucun»:

.Button2
Pointer-Events: Aucun;

L'utilisation de la propriété Pointer-Events et la définition de sa valeur sur non désactivera l'événement de clic, 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 dans HTML, le «événements de pointeur»La propriété de CSS est utilisée. À cette fin, ajoutez un élément HTML et définissez la valeur de la propriété Pointer-Events comme «aucun"Pour désactiver son événement de clic. Cet article a expliqué comment désactiver l'événement de clic à l'aide de CSS avec son exemple.