pointer-events

La propriété CSS pointer-events permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut recevoir des événements de la souris, du pointeur ou du doigt. 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.

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;

/* Valeurs globales */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

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 valeur visiblePainted 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.
visiblePainted
SVG uniquement. L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible 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 pas none 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 pas none.
visibleFill
SVG uniquement. L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible 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
SVG uniquement. L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible 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
SVG uniquement. L'élément ne peut être la cible d'un événement de pointeur que si la propriété visibility vaut visible 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 de fill et stroke n'ont pas d'impact sur le traitement des événements.
painted
SVG uniquement. 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 pas none 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 pas none. La valeur de visibility n'a pas d'impact sur le traitement des événements.
fill
SVG uniquement. 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 de visibility n'ont pas d'impact sur le traitement des événements.
stroke
SVG uniquement. 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 de visibility n'ont pas d'impact sur le traitement des événements.
all
SVG uniquement. 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 de visibility 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.

Spécifications

Spécification Statut Commentaires
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'pointer-events' dans cette spécification.
Recommendation  

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support SVG 1.0 1.5 (1.8) 11.0 9.0 (2.0) 3.0 (522)
Contenu HTML/XML 2.0 3.6 (1.9.2) 11.0 15.0 4.0 (530)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 2.1 3.6 11 33 3.2

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : flexbox, SphinxKnight, teoli, SiegfriedEhret, avetisk
 Dernière mise à jour par : flexbox,