pointer-events |
Événements du pointeur |
| CSS |
|
Syntaxe
pointer-events: paramètres;
|
Paramètres
| Paramètre |
Description |
| auto |
Ce paramètre permet d'indiquer quel utilise la valeur par défaut des événements pointeurs de la souris. |
| none |
Ce paramètre permet d'indiquer que le pointeur de souris n'a jamais de cible. |
| visiblePainted |
Ce paramètre permet d'indiquer que le pointeur de souris peut avoir un événement lorsqu'elle est situé dans la balise et que la propriété «fill» n'a pas la valeur «none». |
| ... |
... |
Description
Cette propriété permet d'indiquer les événements associé au pointeur de la souris.
Remarques
- Il est recommandé d'utiliser cette propriété lorsque vous tentez d'effectuer des redimensionnements de balise comme «IFRAME»
afin de provoquer un meilleur effet de fluidité.
- Définition et rôle : La propriété pointer-events contrôle si un élément peut recevoir des événements de pointeur (comme un clic, un survol, ou une
interaction tactile). Elle permet de gérer la manière dont un élément interagit avec la souris ou d'autres dispositifs d'entrée, influençant ainsi son comportement dans
l'interface utilisateur.
- Utilisation pour désactiver les interactions : Avec pointer-events: none;, un élément devient totalement insensible aux clics, survols, et autres
interactions. Cela peut être utile pour désactiver temporairement un bouton ou empêcher un utilisateur d'interagir avec un élément masqué.
- Impact sur les éléments enfants : Lorsque pointer-events: none; est défini sur un élément parent, tous ses enfants héritent également de ce comportement,
sauf si une valeur différente est explicitement définie sur les enfants.
- Propagation des événements : Un élément avec pointer-events: none; n'intercepte pas les événements, ce qui signifie que ces derniers traversent l'élément
et atteignent les éléments situés en dessous dans l'ordre du DOM. Cela est utile pour concevoir des interfaces où des clics doivent être transmis à des couches inférieures.
- Application spécifique au contenu SVG : La propriété pointer-events est particulièrement puissante dans le contexte du SVG. Elle permet de spécifier des
comportements fins, comme rendre cliquable uniquement le remplissage d'une forme (visiblePainted) ou uniquement son contour (stroke), offrant un contrôle précis sur les
interactions.
- Compatibilité avec les navigateurs Web : pointer-events est bien pris en charge par les navigateurs modernes, mais certaines de ses valeurs spécifiques
au SVG, comme visiblePainted, peuvent ne pas être uniformément implémentées. Pour une compatibilité maximale, limitez-vous
aux valeurs courantes comme auto et none si vous ne travaillez pas avec du SVG.
- Combinaison avec opacity et z-index : Lorsqu'elle est combinée avec opacity: 0;, pointer-events: none; permet de rendre un élément totalement
invisible et insensible aux interactions. Cependant, contrairement à une manipulation avec z-index, cela ne modifie pas l'ordre de superposition dans le DOM, ce
qui conserve des performances optimales tout en rendant l'élément "intouchable".
Dernière mise à jour : Dimanche, le 29 mars 2015
