Exemple de code pour désactiver les événements de clic de souris en utilisant du CSS pur

Cet article explique comment désactiver les événements de clic de souris via du CSS pur. Il est plus flexible que Javascript. Vous pouvez vous y référer si vous en avez besoin.

JavaScript possède une méthode preventDefault, qui peut être utilisée pour annuler l'action par défaut d'un événement. Comme ouvrir des liens, sélectionner du texte ou glisser-déposer, etc.

Copiez le code

Le code est le suivant :

event.preventDefault()

Cette méthode informera le navigateur Web de ne pas pour exécuter l'action par défaut associée à l'événement si une telle action existe. Par exemple, si l'attribut type est « submit », n'importe quel gestionnaire d'événements peut être appelé à n'importe quelle étape de la propagation de l'événement, et en appelant cette méthode, la soumission du formulaire peut être empêchée. Notez que si la propriété annulable de l'objet Event est fasle, alors il n'y a pas d'action par défaut, ou l'action par défaut ne peut pas être empêchée. Dans les deux cas, l’appel de cette méthode n’a aucun effet.

Cette méthode peut empêcher le comportement par défaut du navigateur de l'élément actuel, mais elle n'empêche pas le parent et le document de répondre à l'événement. Si vous souhaitez annuler complètement l'événement, vous pouvez utiliser stopPropagation

Copiez le code

Le code est le suivant suit :

event.stopPropagation()

Cette méthode arrêtera la propagation de l'événement, l'empêchant d'être distribué vers d'autres nœuds Document. Il peut être appelé à n’importe quelle étape de la propagation d’un événement. Notez que bien que cette méthode ne puisse pas empêcher l'appel d'autres gestionnaires d'événements sur le même nœud Document, elle peut empêcher la distribution d'événements vers d'autres nœuds.

Ces deux méthodes sont couramment utilisées pour annuler des événements dans JS, mais il existe en fait une autre façon d'annuler la réponse à un événement en utilisant du CSS pur, pointer-events, qui est plus pratique à utiliser, simple. , il peut :

1. Empêcher l'action de clic de l'utilisateur de produire un effet

2. Empêcher l'affichage du pointeur de la souris par défaut

3. Empêcher le survol et le CSS dans Les changements CSS dans l'état actif déclenchent des événements

4. Empêcher les événements déclenchés par des actions de clic JavaScript

Par exemple, le CSS suivant aura pour effet de griser les boutons désactivés

Copier le code

Le code est le suivant :

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

Cette méthode est évidemment plus flexible que le code js, mais malheureusement ie9 ne le fait pas le soutenir. Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude et au travail de chacun.

Recommandations associées :

Méthode de définition de la couleur de la police du texte CSS (couleur CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!