Qu’est-ce que pointer-events?
La propriété pointer-events contrôle si un élément peut devenir cible d’événements de pointeur comme les clics, les états de survol et autres événements basés sur le pointeur. Autrement dit, elle permet de décider si le navigateur doit considérer l’élément comme interactif lorsqu’il est sous le pointeur.
Exemple CSS
.no-pointer-events {
pointer-events: none;
}Pour comprendre comment la propriété fonctionne, il est utile de connaître les étapes que le navigateur effectue avant de déclencher un événement de pointeur. Tout d’abord, il doit déterminer quel élément est sous le pointeur. Ce processus s’appelle hit-testing.
Normalement, le navigateur choisit l’élément le plus haut au-dessus du pointeur. Cependant, si cet élément a pointer-events défini sur none, le navigateur passe à l’élément suivant en dessous.
Catégories d’événements de pointeur
- Événements de survol (hover)
- Événements de clics (click)
- Événements de déplacement (mousemove, mousedown, mouseup)
pointer-events : none: Empêche tout événement de pointeur sur l’élément.
pointer-events : auto: Le navigateur décide si l’événement est géré par l’élément ou non. Cela correspond à la valeur par défaut.