La propriété CSS pointer-events
permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être une cible, c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Lorsque cette propriété n'est pas définie, pour le contenu SVG, on aura le même effet qu'avec la valeur visiblePainted
. Lorsqu'on utilise la valeur none
, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.
Syntaxe
/* Valeurs avec un mot-clé */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG uniquement */
pointer-events: visibleFill; /* SVG uniquement */
pointer-events: visibleStroke; /* SVG uniquement */
pointer-events: visible; /* SVG uniquement */
pointer-events: painted; /* SVG uniquement */
pointer-events: fill; /* SVG uniquement */
pointer-events: stroke; /* SVG uniquement */
pointer-events: all; /* SVG uniquement */
/* Valeurs globales */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
La propriété pointer-events
est définie grâce à un mot-clé parmi ceux de la liste suivante.
Valeurs
auto
- L'élément se comporte comme si la propriété
pointer-events
n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeurvisiblePainted
ont le même effet. none
- L'élément ne sera jamais la cible d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour
pointer-events
. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/bouillonnement de l'événement.
Valeurs uniquement utilisables avec SVG
visiblePainted
- L'élément ne peut être la cible d'un événement de pointeur que si la propriété
visibility
vautvisible
et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriétéfill
n'est pasnone
ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriétéstroke
n'est pasnone
. visibleFill
- L'élément ne peut être la cible d'un événement de pointeur que si la propriété
visibility
vautvisible
et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriétéfill
n'a pas d'impact sur le traitement des événements. visibleStroke
- L'élément ne peut être la cible d'un événement de pointeur que si la propriété
visibility
vautvisible
et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriétéstroke
n'a pas d'impact sur le traitement des événements. visible
- L'élément ne peut être la cible d'un événement de pointeur que si la propriété
visibility
vautvisible
et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs defill
etstroke
n'ont pas d'impact sur le traitement des événements. painted
- L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété
fill
n'est pasnone
ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriétéstroke
n'est pasnone
. La valeur devisibility
n'a pas d'impact sur le traitement des événements. fill
- L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de
fill
et devisibility
n'ont pas d'impact sur le traitement des événements. stroke
- L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de
stroke
et devisibility
n'ont pas d'impact sur le traitement des événements. all
- L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de
fill
,stroke
et devisibility
n'ont pas d'impact sur le traitement des événements.
Syntaxe formelle
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
Exemples
Dans l'exemple qui suit, on rend le lien http://exemple.com inactif.
HTML
<ul>
<li><a href="https://developer.mozilla.org">MDN</a></li>
<li><a href="http://exemple.com">exemple.com</a></li>
</ul>
CSS
a[href="http://exemple.com"] {
pointer-events: none;
}
Résultat
Notes
L'utilisation de pointer-events
peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de pointer-events
qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.
Les éléments avec pointer-events: none
continueront de recevoir le focus via la navigation au clavier avec la touche Tab.
Spécifications
Spécification | État | Commentaires |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de 'pointer-events' dans cette spécification. |
Recommendation | |
Scalable Vector Graphics (SVG) 2 La définition de 'pointer-events' dans cette spécification. |
Candidat au statut de recommandation |
L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification CSS Basic User Interface Module Level 3, a été remise à la spécification de niveau 4.
Valeur initiale | auto |
---|---|
Applicabilité | tous les éléments |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'attribut SVG
pointer-events
- L'attribut SVG
visibility
- La propriété
user-select
qui contrôle lorsque l'utilisateur peut sélectionner du texte - « Spécification » WebKit pour étendre la propriété pointer-events au contenu (X)HTML
- Un défilement à 60fps en utilisant
pointer-events: none
(en anglais)