Comment définir div pour qu'il ne soit pas cliquable avec CSS

Comment définir div pour qu'il ne soit pas cliquable en utilisant CSS : 1. Annulez l'action par défaut de l'événement via la méthode "event.preventDefault()" 2. Arrêtez la propagation de l'événement via "event" ; .stopPropagation()".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur DELL G3.

Recommandé : Tutoriel vidéo CSS

Comment configurer div pour qu'il ne soit pas cliquable en CSS ?

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 distribution vers d'autres nœuds du document. Il peut être appelé à n’importe quelle étape de la propagation d’un événement. Notez que bien que cette méthode n’empêche pas l’appel d’autres gestionnaires d’événements 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, les événements de pointeur, qui est plus simple à utiliser :

• Empêche l'action de clic de l'utilisateur d'avoir un effet

• Empêche l'affichage du pointeur de la souris par défaut

• Empêcher le survol et les changements d'état actif dans CSS de déclencher des événements

• Empêcher les actions de clic JavaScript de déclencher des événements

Pour définir le div pour qu'il ne soit pas cliquable en utilisant CSS, vous pouvez utiliser le code suivant :

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

Cette méthode est évidemment plus flexible que le code js, mais malheureusement IE9 ne prend pas en charge il.

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!