À propos du code CSS pour empêcher les événements de clic de souris

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.

event.preventDefault()

Cette méthode informera le navigateur Web de ne pas effectuer 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

event.stopPropagation()

Cette méthode arrêtera la propagation de l'événement et empêchera sa transmission vers d'autres Documents. nœuds. Il peut être appelé à n’importe quelle étape de la propagation d’un événement. Notez que même si cette méthode n'empêche pas d'autres gestionnaires d'événements d'être appelés sur le même nœud Document, elle empêche la distribution des é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

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

Cette méthode est évidemment plus flexible que le code js, mais malheureusement ie9 ne la supporte pas.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utiliser CSS3 pour faire pivoter la bordure lorsque la souris survole

Utiliser CSS3 pour obtenir huit groupes d'animation super cool de la souris sur l'image

CSS3 implémente le survol de la souris pour afficher le contenu étendu

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!