OUJOOD.COM
Définition de la propriété CSS pointer-events
La propriété CSS pointer-events permet de contrôler le comportement des événements de souris (clic, survol, etc.) sur les éléments HTML.
Syntaxe générale de la propriété pointer-events CSS
La syntaxe générale de la propriété pointer-events est la suivante :
selector {
pointer-events: value;
}
| Valeurs par défaut | auto |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.pointerEvents="none" |
Valeurs possibles de la propriété pointer-events CSS
Les valeurs possibles pour la propriété pointer-events sont les suivantes :
- auto : le comportement par défaut, les événements de souris sont pris en compte sur l'élément et ses descendants.
- none : les événements de souris sont ignorés sur l'élément et ses descendants.
- visiblePainted : les événements de souris sont pris en compte sur l'élément, mais pas sur ses descendants.
- visibleFill : les événements de souris sont pris en compte sur l'élément si le fond est visible, mais pas sur ses descendants.
- visibleStroke : les événements de souris sont pris en compte sur l'élément si le contour est visible, mais pas sur ses descendants.
- all : les événements de souris sont pris en compte sur l'élément et ses descendants, même si ceux-ci ont une propriété pointer-events: none.
- inherit : la valeur est héritée de l'élément parent.
Exemples pratiques d'utilisation de la propriété pointer-events CSS
Voici quelques exemples pratiques d'utilisation de la propriété pointer-events :
Désactiver les événements de souris sur un élément
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La propriété CSS pointer-events</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f1c40f;
border: 1px solid #e67e22;
padding: 20px;
text-align: center;
font-size: 24px;
margin: 50px;
cursor: pointer;
}
.disabled {
pointer-events: none;
background-color: #bdc3c7;
border: 1px solid #7f8c8d;
cursor: default;
}
</style>
</head>
<body>
<h1>La propriété pointer-events css</h1>
<div class="box disabled">Cliquez-moi !</div>
</body>
</html>
Activer les événements de souris sur un élément malgré la présence d'un élément devant lui
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La propriété CSS pointer-events</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f1c40f;
border: 1px solid #e67e22;
padding: 20px;
text-align: center;
font-size: 24px;
margin: 50px;
cursor: pointer;
}
.disabled {
pointer-events: none;
background-color: #bdc3c7;
border: 1px solid #7f8c8d;
cursor: default;
}
</style>
</head>
<body>
<h1>La propriété pointer-events css</h1>
<div style="position: relative;">
<div class="box">Cliquez-moi !</div>
<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color:# 000;"></div>
</div>
</body>
</html>
Activer les événements de souris sur un élément sous un élément transparent
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La propriété CSS pointer-events</title>
<style>
.box {
width: 400px;
height: auto;
background-color: #f1c40f;
border: 1px solid #e67e22;
padding: 20px;
text-align: center;
font-size: 24px;
margin: 50px;
cursor: pointer;
}
.disabled {
pointer-events: none;
background-color: #bdc3c7;
border: 1px solid #7f8c8d;
cursor: default;
}
</style>
</head>
<body>
<h1>La propriété pointer-events css</h1>
<div style="position: relative;">
<div style="position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background-color: rgba(255, 255, 255, 0.5); pointer-events: none;"></div>
<div class="box">Selecionner le txte:
This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</div>
</div>
</body>
</html>
Astuces et conseils d'utilisation de la propriété CSS pointer-events
Voici quelques astuces et conseils pour utiliser au mieux la propriété pointer-events :
- La valeur none peut être utilisée pour désactiver les événements de souris sur un élément sans changer son apparence. Cela peut être utile pour empêcher les clics sur un élément de masquer un autre élément sous-jacent.
- La valeur all peut être utilisée pour activer les événements de souris sur un élément malgré la présence d'autres éléments devant lui. Cela peut être utile pour les menus déroulants, les tooltips, etc.
- La propriété pointer-events peut être combinée avec d'autres propriétés CSS pour créer des effets intéressants, par exemple en utilisant la transparence pour permettre les clics sur un élément sous un élément transparent.
Comme nous l'avons démontré plus haut, le principal cas d'utilisation des événements de pointeur consiste à permettre au comportement de clic ou de tapotement de "traverser" un élément pour atteindre un autre élément situé en dessous sur l'axe des Z. Cela peut être utile, par exemple, pour les superpositions graphiques ou pour masquer des éléments avec opacité (par exemple, les infobulles) tout en permettant la sélection de texte dans le contenu situé en dessous.
Points d'intérêt
"L'utilisation d'événements de pointeur en CSS pour les éléments non-SVG est expérimentale. Cette fonctionnalité faisait partie du projet de spécification CSS3 UI mais, en raison de nombreuses questions en suspens, elle a été reportée à CSS4." - Mozilla MDN
"Si vous ajoutez un récepteur d'événement de clic à un élément, puis supprimez le style pointer-events (ou changez sa valeur en auto), l'événement de clic déclenchera la fonctionnalité désignée. En fait, l'événement de clic respecte la valeur de pointer-events." - David Walsh
En conclusion, la propriété CSS pointer-events est un outil très utile pour contrôler le comportement des événements de souris sur les éléments HTML. En comprenant comment elle fonctionne et en l'utilisant judicieusement, vous pouvez améliorer l'expérience utilisateur de vos sites web.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 2 | 11 | 3.6 | 4 | 9 |