Propriété CSS pointer-events

Exemple interactif

pointer-events: auto;

pointer-events: none;

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

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

<section class="flex-column" id="default-example">
  <div id="example-element">
    <p>
      <a href="#">exemple de lien</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;

/* Valeurs utilisées dans les SVG */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* Valeurs globales */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
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'est pas définie. Pour le contenu SVG, cette valeur et la valeur visiblePainted ont le même effet.

none

L'élément n'est généralement pas la cible des évènements de pointeur, à l'exception des évènements pointerenter et pointerleave déclenchés sur l'élément ou ses descendants. Notez que les évènements de pointeur ciblant les descendants (qui ne définissent pas pointer-events sur none) déclenchent toujours les écouteurs d'évènements sur cet élément parent pendant la phase de capture et la phase de propagation.

Note : Les évènements pointerenter et pointerleave sont déclenchés lorsqu'un dispositif de pointage est déplacé dans un élément ou l'un de ses descendants. Ainsi, même si pointer-events: none est défini sur le parent et non sur les enfants, les évènements sont déclenchés sur le parent après que le pointeur est entré ou sorti d'un descendant.

Valeurs uniquement utilisables avec SVG (expérimentales en HTML)

visiblePainted

SVG seulement (expérimental en HTML). L'élément ne peut être la cible d'un évènement de pointeur que lorsque la propriété visibility est définie sur visible et, par exemple, lorsqu'un curseur de souris est sur l'intérieur (c'est-à-dire le « remplissage ») de l'élément et que la propriété fill est définie sur une valeur autre que none, ou lorsqu'un curseur de souris est sur le périmètre (c'est-à-dire le « contour ») de l'élément et que la propriété stroke est définie sur une valeur autre que none.

visibleFill

SVG seulement. L'élément ne peut être la cible d'un évènement de pointeur que lorsque la propriété visibility est définie sur visible et, par exemple, lorsqu'un curseur de souris est sur l'intérieur (c'est-à-dire le remplissage) de l'élément. La valeur de la propriété fill n'affecte pas le traitement des évènements.

visibleStroke

SVG seulement. L'élément ne peut être la cible d'un évènement de pointeur que lorsque la propriété visibility est définie sur visible et, par exemple, lorsqu'un curseur de souris est sur le périmètre (c'est-à-dire le contour) de l'élément. La valeur de la propriété stroke n'affecte pas le traitement des évènements.

visible

SVG seulement (expérimental en HTML). L'élément ne peut être la cible d'un évènement de pointeur que lorsque la propriété visibility est définie sur visible et, par exemple, lorsqu'un curseur de souris est sur l'intérieur (c'est-à-dire le remplissage) ou le périmètre (c'est-à-dire le contour) de l'élément. Les valeurs des propriétés fill et stroke n'affectent pas le traitement des évènements.

painted

SVG seulement (expérimental en HTML). L'élément ne peut être la cible d'un évènement de pointeur que lorsque, par exemple, un curseur de souris est sur l'intérieur (c'est-à-dire le « remplissage ») de l'élément et que la propriété fill est définie sur une valeur autre que none, ou lorsque le curseur de souris est sur le périmètre (c'est-à-dire le « contour ») de l'élément et que la propriété stroke est définie sur une valeur autre que none. La valeur de la propriété visibility n'affecte pas le traitement des évènements.

fill

SVG seulement. L'élément ne peut être la cible d'un évènement de pointeur que lorsque le curseur est sur l'intérieur (c'est-à-dire le remplissage) de l'élément. Les valeurs des propriétés fill et visibility n'affectent pas le traitement des évènements.

stroke

SVG seulement. L'élément ne peut être la cible d'un évènement de pointeur que lorsque le curseur est sur le périmètre (c'est-à-dire le contour) de l'élément. Les valeurs des propriétés stroke et visibility n'affectent pas le traitement des évènements.

bounding-box

SVG seulement. L'élément ne peut être la cible d'un évènement de pointeur que lorsque le curseur est sur la boîte englobante de l'élément.

all

SVG seulement (expérimental en HTML). L'élément ne peut être la cible d'un évènement de pointeur que lorsque le curseur est sur l'intérieur (c'est-à-dire le remplissage) ou le périmètre (c'est-à-dire le contour) de l'élément. Les valeurs des propriétés fill, stroke et visibility n'affectent pas le traitement des évènements.

Description

Lorsque cette propriété n'est pas définie pour le contenu SVG, on a 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 également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui peuvent être « en dessous/derrière ».

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 peuvent 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 peuvent 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éclenche pas d'évènement. L'évènement passe « au travers » du parent et cible le contenu qui est en dessous.

Les éléments avec pointer-events: none continuent de recevoir la sélection avec la navigation au clavier avec la touche Tab.

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 lien http://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

Compatibilité des navigateurs

Voir aussi

• La propriété user-select
• L'attribut SVG pointer-events
• L'attribut SVG visibility
• L'interface API PointerEvent