pointer-events - Propriété CSS
Résumé des caractéristiques de la propriété pointer-events
visiblePainted
| all
| none
| painted
| fill
| stroke
| visible
| visibleFill
| visibleStroke
| bounding-box
auto
pointer-events
passe d'une valeur à l'autre sans transition.Description de la propriété pointer-events
.
pointer-events
définit si l'élément doit réagir aux événements du périphérique de pointage. Sur un ordinateur de bureau
la périphérique de pointage sera la plus souvent une souris, mais peut aussi être une tablette graphique, un stylet, etc.
Sur un téléphone mobile, le périphérique de pointage est le doigt de l'utilisateur.
Les événements concernés par pointer-events
seront donc, suivant le cas, click
, mousemove
,
touch
, etc.
Remarque : désactiver les événements souris a également pour conséquence de désactiver les styles définis sur la pseudo-classe
:hover
.
Reportez-vous à la propriété touch-action
pour l'activation ou la désactivation des gestes sur un écran tactile,
comme celui d'un téléphone portable.
Valeurs de pointer-events
appliquée à un élément HTML.
- pointer-events: auto;
Valeur par défaut. L'élément réagit aux événements de la souris. Vous pouvez le constater en déplaçant la souris sur l'échantillon ci-dessous : la surface sensible à la présence de la souris s'affiche en rouge.
Échantillon - pointer-events: none;
L'élément ne réagit pas aux événements de la souris.
Échantillon - pointer-events:
initial
; pointer-events:inherit
; pointer-events:revert
; pointer-events:revert-layer
; pointer-events:unset
;La valeur initiale est :
.auto
Valeurs de pointer-events
appliquée à un élément SVG.
La propriété pointer-events
offre plus de possibilités lorsqu'elle est appliquée à un élément SVG.
Il est par exemple possible de distinguer le contour de l'élément et sa surface intérieure.
- pointer-events: auto;
L'élément réagit aux événements de la souris lorsque cette dernière se trouve sur une partie visible de l'élément (valeur différente de
none
). L'élément réagit aux événements de la souris dès que cette dernière se trouve sur le remplissage ou sur le contour, dans la mesure où la valeur du remplissage ou du contour ne sont pasnone
et que l'élément est affiché (valeurvisibility
différente dehidden
).Cette valeur est équivalente à
visiblePainted
.Caractéristique Code correspondant auto
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
NON Avec remplissage fill="..."
OUI Sans remplissage fill="none"
NON Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: none;
L'élément ne réagit pas aux événements de la souris.
Caractéristique Code correspondant none
Bordure présente stroke="..."
NON Bordure absente stroke="none"
NON Remplissage oui fill="..."
NON Remplissage non fill="none"
NON Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: all;
L'élément réagit aux événements de la souris lorsque celle-ci est positionnée sur le contour aussi bien que sur la surface intérieure de l'élément, et ceci même si ces éléments ont la valeur
none
et si la visibilité est surhidden
.Caractéristique Code correspondant all
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
OUI Remplissage oui fill="..."
OUI Remplissage non fill="none"
OUI Élément masqué visibility="hidden"
OUI SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: fill; pointer-events: visiblefill;
L'élément réagit aux événements de la souris uniquement lorsque celle-ci est positionnée sur le remplissage de l'élément, même si ce dernier a la valeur
none
. Le contour n'est donc pas réactif aux actions de la souris.
La valeur
visiblefill
impose en plus que l'élément ne soit pas masqué parvisibility="hidden"
.Attention à un petit détail qui peut être trompeur : la zone
fill
s'étend jusqu'au milieu de la bordure. On a donc l'impression que la réaction se produit alors que la souris est encore sur la bordure, mais dès que le milieu de la bordure est franchi, la souris est aussi sur la zone centralefill
.Caractéristique Code correspondant fill
Bordure présente stroke="..."
NON Bordure absente stroke="none"
NON Remplissage oui fill="..."
OUI Remplissage non fill="none"
OUI Élément masqué visibility="hidden"
OUI SVGfill="cyan"fill="none"visibility="hidden"Caractéristique Code correspondant visiblefill
Bordure présente stroke="..."
NON Bordure absente stroke="none"
NON Remplissage oui fill="..."
OUI Remplissage non fill="none"
OUI Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: stroke; pointer-events: visiblestroke;
L'élément réagit aux événements de la souris uniquement lorsque celle-ci est positionnée sur le contour, même si la valeur de ce dernier est
none
.
Avecvisiblestroke
il faut en plus que l'élément ne soit pas masqué parvisibility="hidden"
.Caractéristique Code correspondant stroke
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
OUI Remplissage oui fill="..."
NON Remplissage non fill="none"
NON Élément masqué visibility="hidden"
OUI SVGfill="cyan"fill="none"visibility="hidden"Caractéristique Code correspondant visiblestroke
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
OUI Remplissage oui fill="..."
NON Remplissage non fill="none"
NON Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: painted; pointer-events: visiblepainted;
L'élément réagit aux événements de la souris dès que cette dernière se trouve sur le remplissage ou sur le contour, dans la mesure où la valeur du remplissage ou du contour ne sont pas
none
.La valeur
visiblepainted
introduit la condition supplémentaire que l'élément ne doit pas être masqué parvisibility="hidden"
.Caractéristique Code correspondant painted
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
NON Remplissage oui fill="..."
OUI Remplissage non fill="none"
NON Élément masqué visibility="hidden"
OUI SVGfill="cyan"fill="none"visibility="hidden"Caractéristique Code correspondant visiblepainted
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
NON Remplissage oui fill="..."
OUI Remplissage non fill="none"
NON Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: visible;
L'élément réagit aux événements de la souris quelque soit la position de la souris (sur le contour ou la surface intérieure), même si le remplissage et la bordure ont la valeur
none
, mais à condition que l'élément ne soit pas caché par la propriétévisible:hidden
.Caractéristique Code correspondant visible
Bordure présente stroke="..."
OUI Bordure absente stroke="none"
OUI Remplissage oui fill="..."
OUI Remplissage non fill="none"
OUI Élément masqué visibility="hidden"
NON SVGfill="cyan"fill="none"visibility="hidden" - pointer-events: bounding-box; ⚠
La zone sensible aux événements de souris est le
bounding-box
, autrement dit le rectangle le plus petit qui peut contenir l'élément dans son ensemble, ainsi que ses descendants éventuels.Caractéristique Code correspondant bounding-box
/td>Bordure présente stroke="..."
OUI Bordure absente stroke="none"
OUI Remplissage oui fill="..."
OUI Remplissage non fill="none"
OUI Élément masqué visibility="hidden"
OUI SVGfill="cyan"fill="none"visibility="hidden" - pointer-events:
initial
; pointer-events:inherit
; pointer-events:revert
; pointer-events:revert-layer
; pointer-events:unset
;La valeur initiale est :
.auto
Cas particulier de pointer-events
appliquée à un texte en SVG.
Le traitement des événements du pointeur sur le texte présente deux particularités :
- C'est la surface du caractère qui est sensible aux événement, et non pas seulement le glyphe du caractère. Autrement dit, our le caractère
O
, le centre de la lettre sera autant sensible que le cercle qui constitue le O. pointer-events
ne distingue pas le remplissage du contenu : il suffit que l'une de ces deux parties à une valeur différente denone
pour que le caractère soit considéré comme visible.
- pointer-events:auto; pointer-events:visiblepainted;
Ces deux valeurs sont équivalentes. Appliquées à un texte SVG, elles rendent la surface du caractère sensible aux événements de souris dès lors que le remplissage OU le contour ont une valeur différente de
none
et que l'élément est visible (visibility
différent dehidden
).Caractéristique Code correspondant auto
Bordure ou remplissage stroke="..."
oufill="..."
OUI Ni bordure, ni remplissage stroke="none"
Etfill="none"
NON Élément masqué visibility="hidden"
NON Texte SVGstroke="black"
fill="cyan"stroke="none"
fill="none"visibility="hidden" - pointer-events:none;
Pas de mystère : les événements de souris sont totalement désactivé pour tout l'élément.
- pointer-events:painted;
Appliquée à un texte SVG, la valeur
painted
rend la surface du caractère sensible aux événements de souris dès lors que le remplissage OU le contour ont une valeur différente denone
, même si l'élément est maqué parvisibility="hidden"
.Caractéristique Code correspondant painted
Bordure ou remplissage stroke="..."
oufill="..."
OUI Ni bordure, ni remplissage stroke="none"
Etfill="none"
NON Élément masqué visibility="hidden"
OUI Texte SVGstroke="black"
fill="cyan"stroke="none"
fill="none"visibility="hidden" - pointer-events:all; pointer-events:stroke; pointer-events:fill;
Ces trois valeurs sont équivalentes lorsqu'elles sont appliquées à un texte SVG : la surface du caractère est sensible aux événements de souris, quelque soit les valeurs des propriétés
fill
,stroke
etvisibility
.Caractéristique Code correspondant all
Bordure ou remplissage stroke="..."
oufill="..."
OUI Ni bordure, ni remplissage stroke="none"
Etfill="none"
OUI Élément masqué visibility="hidden"
OUI Texte SVGstroke="black"
fill="cyan"stroke="none"
fill="none"visibility="hidden" - pointer-events:visible; pointer-events:visiblestroke; pointer-events:visiblefill;
Ces trois valeurs donnent le même résultat lorsqu'elles sont appliquées à un texte SVG : la surface du caractère est sensible aux événements si l'élément n'est pas masqué par la propriété
visibility
, et quelque soit la valeur des propriétésstroke
etfill
.Caractéristique Code correspondant visible
Bordure ou remplissage stroke="..."
oufill="..."
OUI Ni bordure, ni remplissage stroke="none"
Etfill="none"
OUI Élément masqué visibility="hidden"
NON Texte SVGstroke="black"
fill="cyan"stroke="none"
fill="none"visibility="hidden"
Animation de la propriété pointer-events
.
Le petit exemple ci-dessous applique une couleur clignotante sur l'arrière-plan de l'élément, cet effet ne s'activant que lorsque la souris est au dessus de l'élément.
Remarque : l'effet est plus ou moins bien rendu suivant le navigateur. Mozilla est celui qui traite le mieux cette animation. Les autres navigateurs nécessitent de déplacer la souris (tout en restant sur l'élément) pour que l'effet soir correctement restitué.
Simulateur pour pointer-events
.
Déplacez la souris sur le cadre "Élément HTML", vous le verrez changer de couleur (styles sur :hover
).
Cliquez sur le cadre et vous verrez s'afficher un message.
Tout ceci peut être désactivé en changeant la valeur de la propriété pointer-events
.
Ce simulateur applique également la propriété pointer-events
aux cercles ci-après, définis en SVG.
Ceux-ci présentent toutes les combinaisons possibles entre un contour transparent ou opaque, et une surface intérieure transparente ou opaque.
Le dernier cercle est invisible (on lui a appliqué la propriété visible
avec la valeur hidden
).
Les cercles sont par défaut tous réactifs à la souris. La valeur attribuée à pointer-events
permet de changer cela, par exemple de rendre seulement le contour réactif,
ou seulement la surface intérieure.
Prise en charge par les navigateurs (compatibilité).
Le tableau ci-dessous représente la compatibilité des navigateurs avec la propriété pointer-events
appliquée à des éléments HTML.
pointer-events
(HTML)