Propriété CSS pointer-events

La propriété pointer-events définit si un élément réagit ou non aux événements pointeur.

INFO

Initialement définie pour SVG, pointer-events est désormais une propriété CSS standard.

De nombreuses valeurs sont applicables aux éléments SVG, mais seuls auto et none sont largement pris en charge pour les éléments HTML.

Notes importantes

La définition de pointer-events: none sur un élément l'empêche d'être la cible d'événements pointeur, mais cela n'empêche pas les écouteurs d'événements sur cet élément de se déclencher. Si un élément enfant a pointer-events activé, il peut toujours être ciblé. Par conséquent, les événements ciblant l'enfant remonteront à travers le parent et déclencheront tous les écouteurs qui y sont attachés.

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	Scalable Vector Graphics (SVG) 1.1 (Deuxième Édition).
Syntaxe DOM	`object.style.pointerEvents = "auto";`

Syntaxe

Syntaxe CSS de pointer-events

css

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

Exemple de la propriété pointer-events :

Exemple de code CSS pointer-events

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
      div.example:hover,
      div.example2:hover {
        outline: 2px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>The Pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.w3docs.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.w3docs.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS pointer-events none value

Dans l'exemple ci-dessus, survolez les éléments pour voir lequel réagit aux pointer-events.

Cet exemple montre comment les événements pointeur peuvent traverser ou être capturés par les éléments sous-jacents. Les chemins superposés illustrent ce comportement : le chemin de classe .c a pointer-events: none, donc les clics le traversent pour atteindre les formes en dessous. Le chemin de classe .d utilise pointer-events: all pour s'assurer qu'il capture les événements même lorsqu'il chevauche visuellement d'autres éléments :

Exemple de pointer-events avec la balise `<svg>` :

Exemple de valeur none pour CSS pointer-events

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events property example</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
none	L'élément ne réagit jamais aux événements pointeur.
auto	L'élément accepte les événements pointeur tels que les clics, le survol, etc. Il s'agit de la valeur par défaut de cette propriété.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Valeurs spécifiques à SVG

Valeur	Description
visiblePainted	L'élément ne peut être la cible d'un événement pointeur que lorsque la propriété `visibility` est définie sur `visible`, que le curseur de la souris se trouve à l'intérieur ou sur le périmètre de l'élément, et que la propriété `fill` ou `stroke` est définie sur une valeur autre que `none`.
visibleFill	L'élément ne peut être la cible d'un événement pointeur que lorsque la propriété `visibility` est définie sur `visible` et que le curseur de la souris se trouve à l'intérieur de l'élément.
visibleStroke	L'élément ne peut être la cible d'un événement pointeur que lorsque la propriété `visibility` est définie sur `visible` et que le curseur de la souris se trouve sur le périmètre de l'élément.
visible	L'élément ne peut être la cible d'un événement pointeur que lorsque la propriété `visibility` est définie sur `visible` et que le curseur de la souris se trouve soit à l'intérieur, soit sur le périmètre de l'élément.
painted	L'élément ne peut être la cible d'un événement pointeur que lorsque le curseur de la souris se trouve à l'intérieur ou sur le périmètre de l'élément et que la propriété `fill` ou `stroke` est définie sur une valeur autre que `none`.
fill	L'élément ne peut être la cible d'un événement pointeur que lorsque le pointeur se trouve à l'intérieur de l'élément.
stroke	L'élément ne peut être la cible d'un événement pointeur que lorsque le pointeur se trouve sur le périmètre de l'élément.
all	L'élément ne peut être la cible d'un événement pointeur que lorsque le pointeur se trouve à l'intérieur ou sur le périmètre de l'élément.

Pratique

Que fait la propriété 'pointer-events' en CSS ?

Elle permet à un élément de réagir aux clics de la souris.Elle ajuste la luminosité d'un élément.Elle définit si un élément réagit ou non aux événements de la souris.Elle applique une transformation 3D à un élément.Elle permet aux éléments situés derrière l'élément cible de capturer les événements.

Propriété CSS pointer-events ​

Notes importantes ​

Syntaxe ​

Exemple de la propriété pointer-events : ​

Résultat ​

Exemple de pointer-events avec la balise <svg> : ​

Valeurs ​

Valeurs spécifiques à SVG ​

Pratique ​