La propriété CSS pointer-events
Utilisez la propriété pointer-events qui définit si un élément peut réagir aux événements tactiles. Voir les valeurs et des exemples.
La propriété pointer-events contrôle si un élément peut être la cible d'événements de pointeur — clics de souris, survol, toucher et entrée au stylet. Lorsqu'elle est définie sur none, l'élément devient « transparent » au pointeur : les clics, survols et autres interactions le traversent pour atteindre ce qui se trouve en dessous.
Cette page explique les valeurs de la propriété, où elle fonctionne réellement en HTML par rapport à SVG, les cas d'utilisation courants et les pièges à éviter.
Initialement défini pour SVG, pointer-events est désormais une propriété CSS standard.
De nombreuses valeurs s'appliquent uniquement aux éléments SVG. Pour les éléments HTML ordinaires, seules auto et none sont largement prises en charge — les valeurs spécifiques à SVG (fill, stroke, visiblePainted, etc.) n'ont aucun effet sur HTML.
Quand l'utiliser
- Superpositions cliquables. Une superposition décorative ou de chargement couvre la page, mais vous souhaitez que les clics atteignent le contenu en dessous. Définissez
pointer-events: nonesur la superposition. - Désactiver un contrôle visuellement. Combinez
pointer-events: noneavec uneopacityréduite pour qu'un bouton ou un lien ait l'apparence et le comportement d'un élément désactivé (les liens n'ont pas d'attribut natifdisabled, c'est donc un schéma courant). - Laisser les événements traverser des formes SVG spécifiques. Une forme dessinée au-dessus d'autres peut être rendue non interactive pour que les formes en dessous restent cliquables.
- Réactiver un enfant dans un parent désactivé. Définissez
nonesur un conteneur etautosur un enfant pour rendre uniquement cet enfant interactif.
Remarques importantes
Définir pointer-events: none sur un élément l'empêche d'être la cible d'événements de pointeur, mais cela ne bloque pas les écouteurs d'événements sur cet élément. Si un élément enfant a pointer-events réactivé (auto), l'enfant peut toujours être ciblé. Les événements ciblant l'enfant remontent ensuite à travers le parent et déclenchent tous les écouteurs qui lui sont attachés.
pointer-events: none bloque uniquement les entrées de pointeur. Cela ne retire pas l'élément de l'ordre de tabulation, donc les utilisateurs au clavier peuvent toujours atteindre un lien ou un bouton « désactivé » via la touche Tab. Pour une accessibilité réelle, retirez également l'élément de l'ordre de tabulation (tabindex="-1") ou utilisez l'attribut disabled réel sur les contrôles de formulaire.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animable | Non. |
| Version | Scalable Vector Graphics (SVG) 1.1 (Second Edition). |
| Syntaxe DOM | object.style.pointerEvents = "auto"; |
Syntaxe
Syntaxe CSS de pointer-events
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
<!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>Résultat
Dans l'exemple ci-dessus, survolez chaque boîte. Le premier <div> (pointer-events: none) ne répond pas — son lien n'est pas cliquable et aucun contour n'apparaît au survol. Le deuxième <div> (pointer-events: auto) se comporte normalement.
Schéma courant : un lien désactivé
Étant donné que les ancres n'ont pas d'attribut disabled, pointer-events: none est la méthode habituelle pour rendre un lien non cliquable. Associez-le à opacity pour que l'état soit visible :
.btn-link.is-disabled {
pointer-events: none;
opacity: 0.5;
cursor: default;
}N'oubliez pas la mise en garde d'accessibilité ci-dessus : le lien est toujours accessible au clavier, sauf si vous définissez également tabindex="-1".
Exemple avec la balise <svg>
En SVG, pointer-events peut router les clics à travers des formes empilées. Dans l'exemple suivant, le chemin avec la classe .c utilise pointer-events: none, donc les clics le traversent pour atteindre les formes en dessous, tandis que .d utilise pointer-events: all pour capturer les événements même là où son remplissage est transparent :
Exemple de valeur none de CSS pointer-events
<!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>Valeurs
| Valeur | Description |
|---|---|
| none | L'élément ne réagit jamais aux événements de pointeur. |
| auto | L'élément accepte les événements de pointeur tels que les clics, le survol, etc. Il s'agit de la valeur par défaut de cette propriété. |
| initial | Fait utiliser à la propriété sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Valeurs SVG uniquement
| Valeur | Description |
|---|---|
| visiblePainted | 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, que le curseur de la souris est sur l'intérieur ou 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 de pointeur que lorsque la propriété visibility est définie sur visible et que le curseur de la souris est sur l'intérieur de l'élément. |
| visibleStroke | 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 que le curseur de la souris est sur le périmètre de l'élément. |
| visible | 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 que le curseur de la souris est sur l'intérieur ou le périmètre de l'élément. |
| painted | L'élément ne peut être la cible d'un événement de pointeur que lorsque le curseur de la souris est sur l'intérieur ou 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 de pointeur que lorsque le pointeur est sur l'intérieur de l'élément. |
| stroke | L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est sur le périmètre de l'élément. |
| all | L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est sur l'intérieur ou le périmètre de l'élément. |
Propriétés associées
cursor— modifie le curseur de la souris affiché sur un élément (utilisezcursor: not-allowedpour renforcer l'apparence désactivée).visibility—visibility: hiddenretire également un élément de l'interaction par pointeur, mais masque aussi l'élément.opacity— souvent associé àpointer-events: nonepour afficher un état désactivé.user-select— contrôle si le texte à l'intérieur d'un élément peut être sélectionné.