La propriétéCSSpointer-events permet de contrôler les circonstances dans lesquelles un élément graphique peut êtreune cible, c'est-à-dire recevoir des évènements de la souris, du pointeur ou du doigt.

Exemple interactif

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section>  <div>    <p>      <a href="#">example link</a>    </p>    <p>      <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <a xlink:href="#">          <circle            cx="50"            cy="50"            fill="#3E6E84"            r="40"            stroke="#ffb500"            stroke-width="5"></circle>          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>        </a>      </svg>    </p>  </div></section>

#example-element {  font-weight: bold;}#example-element a {  color: #009e5f;}#example-element svg {  width: 10em;  height: 10em;}

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: revert;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 jamaisla 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 pourpointer-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 (expérimentales en HTML)

visiblePainted

SVG uniquement (expérimental en HTML). 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

SVG uniquement. 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

SVG uniquement. 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

SVG uniquement (expérimental en HTML). 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 ou du contour de l'élément. Les valeurs defill etstroke n'ont pas d'impact sur le traitement des événements.

painted

SVG uniquement (expérimental en HTML). 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

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 defill et devisibility 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 destroke et devisibility n'ont pas d'impact sur le traitement des événements.

all

SVG uniquement (expérimental en HTML). 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 ou du contour de l'élément. Les valeurs defill, destroke et devisibility n'ont pas d'impact sur le traitement des événements.

Description

Lorsque cette propriété n'est pas définie pour le contenu SVG, on aura le même effet qu'avec la valeurvisiblePainted.

Lorsqu'on utilise la valeurnone, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être « en dessous/derrière ».

L'utilisation depointer-events peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Celane 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 depointer-events qui luipermet 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 pas d'événement. L'événement passera « au travers » du parent et ciblera le contenu qui est en dessous.

Les éléments avecpointer-events: none continueront de recevoir le focus via la navigation au clavier avec la toucheTab.

Définition formelle

Syntaxe formelle

pointer-events =
auto|
bounding-box|
visiblePainted|
visibleFill|
visibleStroke|
visible|
painted|
fill|
stroke|
all|
none

Exemples

Désactiver les événements de pointeur pour toutes les images

Dans l'exemple qui suit, on désactive les événements de pointeur (cliquer, glisser, survoler, etc.) pour toutes les images.

img {  pointer-events: none;}

Désactiver les événements de pointeur pour un lien

Dans l'exemple qui suit, on désactive les événements de pointeur pour le lienhttp://example.com.

HTML

<ul>  <li><a href="https://developer.mozilla.org">MDN</a></li>  <li><a href="http://example.com">example.com</a></li></ul>

CSS

a[href="http://example.com"] {  pointer-events: none;}

Résultat

Spécifications

Bien que l'extension depointer-events au contenu HTML soit incluse dans les premières ébauches du niveau 3 du moduleCSS Basic User Interface, elle a été reportée à la spécification de niveau 4.

Compatibilité des navigateurs

Voir aussi

• L'attribut SVGpointer-events
• L'attribut SVGvisibility
• Spécification WebKit pour étendre la propriétépointer-events (en anglais) au contenu (X)HTML
• La propriétéuser-select qui contrôle lorsque l'utilisateur peut sélectionner du texte
• La page du wiki de Mozilla pour recenser les cas d'usage nécessitant l'extension des valeurs implémentées pour HTML