Pointer-events - Propriété CSS

pointer-events

Résumé des caractéristiques de la propriété pointer-events

Description rapide
Réaction au survol de la souris ou autre événement lié à la souris.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
visiblePainted | all | none | painted | fill | stroke | visible | visibleFill | visibleStroke | bounding-box
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété pointer-events passe d'une valeur à l'autre sans transition.
Module W3C
Les événements de pointeur
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de pointer-events.

pointer-events - Syntax DiagramSyntax diagram of the pointer-events CSS property for HTML elements. auto auto none nonepointer-events:;pointer-events:;
Schéma syntaxique de la propriété pointer-events
Sur un document HTML
pointer-events - Syntax DiagramSyntax diagram of the pointer-events CSS property for SVG elements. none none all all fill fill visibleFill visibleFill stroke stroke visibleStroke visibleStroke painted painted visiblePainted visiblePainted visible visible bounding-box bounding-boxpoint… :;point… :;
Schéma syntaxique de la propriété
pointer-events (sur un document SVG)
pointer-events - Syntax DiagramSyntax diagram of the pointer-events CSS property for text elements in SVG. none none all all fill fill visibleFill visibleFill stroke stroke visibleStroke visibleStroke painted painted visiblePainted visiblePainted visible visiblepoint… :;point… :;

Schéma syntaxique de la propriété
pointer-events (sur du texte SVG)
Les liens présents sur les schémas donnent accès à des exemples.

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

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 pas none et que l'élément est affiché (valeur visibility différente de hidden).

    Cette valeur est équivalente à visiblePainted. Il faut noter auto ne figure pas dans la spécification du W3C, mais tous les navigateurs reconnaissent cette valeur.

    CaractéristiqueCode correspondantauto
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"NON
    Avec remplissagefill="..."OUI
    Sans remplissagefill="none"NON
    Élément masquévisibility="hidden"NON
    SVG
    fill="cyan"fill="none"visibility="hidden"
  • pointer-events: none;

    L'élément ne réagit pas aux événements de la souris.

    CaractéristiqueCode correspondantnone
    Bordure présentestroke="..."NON
    Bordure absentestroke="none"NON
    Remplissage ouifill="..."NON
    Remplissage nonfill="none"NON
    Élément masquévisibility="hidden"NON
    SVG
    fill="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 sur hidden.

    CaractéristiqueCode correspondantall
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"OUI
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"OUI
    Élément masquévisibility="hidden"OUI
    SVG
    fill="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é par visibility="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 centrale fill.

    CaractéristiqueCode correspondantfill
    Bordure présentestroke="..."NON
    Bordure absentestroke="none"NON
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"OUI
    Élément masquévisibility="hidden"OUI
    SVG
    fill="cyan"fill="none"visibility="hidden"
    CaractéristiqueCode correspondantvisiblefill
    Bordure présentestroke="..."NON
    Bordure absentestroke="none"NON
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"OUI
    Élément masquévisibility="hidden"NON
    SVG
    fill="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.
    Avec visiblestroke il faut en plus que l'élément ne soit pas masqué par visibility="hidden".

    CaractéristiqueCode correspondantstroke
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"OUI
    Remplissage ouifill="..."NON
    Remplissage nonfill="none"NON
    Élément masquévisibility="hidden"OUI
    SVG
    fill="cyan"fill="none"visibility="hidden"
    CaractéristiqueCode correspondantvisiblestroke
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"OUI
    Remplissage ouifill="..."NON
    Remplissage nonfill="none"NON
    Élément masquévisibility="hidden"NON
    SVG
    fill="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é par visibility="hidden".

    CaractéristiqueCode correspondantpainted
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"NON
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"NON
    Élément masquévisibility="hidden"OUI
    SVG
    fill="cyan"fill="none"visibility="hidden"
    CaractéristiqueCode correspondantvisiblepainted
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"NON
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"NON
    Élément masquévisibility="hidden"NON
    SVG
    fill="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éristiqueCode correspondantvisible
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"OUI
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"OUI
    Élément masquévisibility="hidden"NON
    SVG
    fill="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.

    Pointer-events sur bouding-box

    CaractéristiqueCode correspondantbounding-box
    Bordure présentestroke="..."OUI
    Bordure absentestroke="none"OUI
    Remplissage ouifill="..."OUI
    Remplissage nonfill="none"OUI
    Élément masquévisibility="hidden"OUI
    SVG
    fill="cyan"fill="none"visibility="hidden"

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 de none 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 de hidden).

    CaractéristiqueCode correspondantauto
    Bordure ou remplissagestroke="..."
    ou fill="..."    		OUI
    Ni bordure, ni remplissagestroke="none"
    Et fill="none"    		NON
    Élément masquévisibility="hidden"NON
    Texte SVG
    O O O stroke="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 de none, même si l'élément est maqué par visibility="hidden".

    CaractéristiqueCode correspondantpainted
    Bordure ou remplissagestroke="..."
    ou fill="..."    		OUI
    Ni bordure, ni remplissagestroke="none"
    Et fill="none"    		NON
    Élément masquévisibility="hidden"OUI
    Texte SVG
    O O O stroke="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 et visibility.

    CaractéristiqueCode correspondantall
    Bordure ou remplissagestroke="..."
    ou fill="..."    		OUI
    Ni bordure, ni remplissagestroke="none"
    Et fill="none"    		OUI
    Élément masquévisibility="hidden"OUI
    Texte SVG
    O O O stroke="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és stroke et fill.

    CaractéristiqueCode correspondantvisible
    Bordure ou remplissagestroke="..."
    ou fill="..."    		OUI
    Ni bordure, ni remplissagestroke="none"
    Et fill="none"    		OUI
    Élément masquévisibility="hidden"NON
    Texte SVG
    O O O stroke="black"
    fill="cyan"    stroke="none"
    fill="none"    visibility="hidden"

Valeurs communes à toutes les propriétés :

pointer-events: initial (auto) pointer-events: inherit pointer-events: revert pointer-events: revertLayer pointer-events: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

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.

pointer-events :
Élément HTML

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.

fill="lightblue" stroke-="black" fill="none" stroke-="none" fill="lightblue" stroke-="black" fill="none" stroke="none" visibility="hidden"

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.

1
Propriété
pointer-events
Estimation de la prise en charge globale.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Voir aussi, dans le module Les événements de pointeur.

Propriétés :

touch-action
Détermine quels sont les gestes traités par le navigateur sur un écran tactile (glissé du doigt, zoom par pincement...)