Un dégradé décoratif posé au dessus d'une image, une icône glissée à l'intérieur d'un bouton, un élément qui doit rester visible sans jamais capter le moindre clic : dans ces trois cas, il faut qu'un élément existe visuellement tout en devenant totalement transparent aux interactions de la souris. C'est exactement ce que fait pointer-events.
C'est une propriété discrète, peu connue des débutants, mais qui résout d'un coup des problèmes qui semblent autrement nécessiter du JavaScript ou une réorganisation complète du HTML.
Définition
pointer-events détermine si un élément peut devenir la cible d'un événement de pointeur : clic, survol, glisser-déposer. Sa valeur par défaut, auto, laisse l'élément réagir normalement. Réglée sur none, elle rend l'élément totalement invisible à la souris : les clics et le survol le traversent, comme s'il n'existait plus à cet endroit précis, et atteignent directement l'élément situé juste en dessous.
Exemple concret : un dégradé décoratif qui bloque les clics
.carte {
position: relative;
}
.carte .degrade-decoratif {
position: absolute;
inset: 0;
pointer-events: none;
}Sans cette ligne, ce Dégradé CSS purement visuel, posé en position: absolute par dessus toute la carte, intercepterait chaque clic destiné à l'image ou au bouton qu'il recouvre. pointer-events: none le rend transparent aux interactions tout en gardant son effet visuel intact.
Autre cas d'usage : une icône à l'intérieur d'un bouton
.bouton svg {
pointer-events: none;
}Sans cette règle, cliquer précisément sur l'icône à l'intérieur d'un bouton peut déclencher un comportement légèrement différent d'un clic sur le reste du bouton, en particulier quand un script vérifie l'élément exact ciblé par l'événement. Neutraliser l'icône garantit qu'un clic n'importe où sur le bouton, icône comprise, se comporte toujours de la même façon.
Le piège : ce n'est pas un vrai désactivage accessible
pointer-events: none bloque uniquement la souris. Un bouton ou un lien qui garde le focus clavier reste activable avec la touche Entrée, même invisible aux clics, ce qui crée une expérience incohérente entre souris et clavier. Pour désactiver réellement un contrôle interactif, l'attribut disabled ou aria-disabled reste la bonne solution ; pointer-events ne devrait servir qu'à des éléments purement décoratifs ou à des cas d'interface très spécifiques, pas comme substitut à une vraie désactivation.
Un autre détail passe souvent inaperçu : cursor ne change pas automatiquement avec pointer-events. Un élément en pointer-events: none garde le curseur qu'aurait affiché l'élément situé juste en dessous, ce qui peut surprendre si l'intention était de montrer une icône d'interdiction. Pour obtenir ce résultat précis, il faut alors combiner les deux propriétés sur le même élément, l'une gérant l'interaction, l'autre uniquement l'apparence visuelle du curseur.
Questions fréquentes
pointer-events: none est-il suffisant pour désactiver un bouton ?
Non, ce n'est pas une bonne pratique. Cette propriété bloque uniquement les interactions à la souris, pas le clavier, ce qui laisse un bouton théoriquement désactivé mais encore déclenchable par un utilisateur au clavier, avec une apparence qui peut même rester identique à l'état actif si aucun autre style n'a été ajouté. L'attribut HTML disabled, qui retire aussi l'élément de la navigation au clavier, reste le bon outil pour désactiver un vrai contrôle interactif.
Peut-on cibler juste les enfants avec pointer-events, pas le parent ?
Oui. En réglant le parent sur pointer-events: none puis un enfant précis sur pointer-events: auto, seul cet enfant redevient cliquable, alors que le reste du parent laisse passer les clics vers ce qu'il y a en dessous. Cette combinaison est pratique pour un overlay qui ne doit laisser interagir qu'avec un seul bouton posé par dessus.
pointer-events fonctionne-t-il aussi sur les événements tactiles ?
Oui, sur la quasi totalité des navigateurs modernes, pointer-events s'applique aussi bien au tactile qu'à la souris, puisque les deux passent par la même famille d'événements de pointeur unifiée par la plateforme. Un élément en none devient donc également transparent à un appui du doigt sur un écran tactile, sans réglage supplémentaire à prévoir.