mozilla

pointer-events

Résumé

La propriété CSS pointer-events permet aux développeurs de contrôler sous quelles circonstances (s'il y en a) un élément graphique en particulier peut devenir la cible d'événements souris. Lorsque cette propriété n'est pas spécifiée, les mêmes caractéristiques que la valeur visiblePainted sont appliquée au contenu SVG.

En plus d'indiquer que l'élément n'est jamais la cible d'événements souris, la valeur none permet à l'événement de passer « au travers » de l'élément et de cibler ce qui est « en-dessous » de cette élément plutôt que l'élément lui-même.

Attention : L'utilisation de pointer-events en CSS pour des éléments non SVG est expérimentale. Cette fonctionnalité faisait partie du brouillon de la spécification CSS3 UI, mais du à de nombreuses questions non résolues, elle a été reportée à celle de la CSS4.

Syntaxe

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Valeurs

auto
L'élément se comporte comme si la propriété pointer-events n'avait pas été spécifiée. Dans un content SVG, cette valeur et la valeur  visiblePainted ont le même effet.
none
L'élément lui-même n'est jamais la cible d'événements souris, cependant, ces derniers peuvent cibler ses descendants si ses descendants ont la propriété pointer-events définie à une autre valeur. En ce cas, les événements souris déclencheront correctement les écouteurs d'événements sur cet élément parent, et ce sur toute la longueur depuis/vers le descendant, durant la phase événementielle de capture/bubble.
visiblePainted
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement lorsque la propriété visibility est définie à visible et lorsque le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') de l'élément, et que la propriété fill est définie à une autre valeur que none, ou lorsque le pointeur de la souris est au-dessus du périmètre (i.e., 'contour') de l'élément et que la propriété stroke est définie à une autre valeur que none.
visibleFill
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement lorsque la propriété visibility est définie à visible et lorsque le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') de l'élément. La valeur de la propriété fill n'affecte pas le traitement des événements.
visibleStroke
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement lorsque la propriété visibility est définie à visible et lorsque le pointeur de la souris est au-dessus du périmètre (i.e., 'contour') de l'élément. La valeur de la propriété stroke n'affecte pas le traitement des événements.
visible
SVG uniquement. L'élément peut être la cible d'un événement souris lorsque la propriété visibility est définie à visible est que le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') ou du périmètre (i.e., 'contour') de l'élément. Les valeurs des propriétés fill et stroke n'affectent pas le traitement des événements.
painted
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement lorsque le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') de l'élément et que la propriété fill est définie à une autre valeur que none, ou lorsque le pointeur de la souris est au-dessus du périmètre (i.e., 'contour') de l'élément et que la propriété stroke est définie à une autre valeur que none. La valeur de la propriété visibility n'affecte pas le traitement des événements.
fill
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement si le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') de l'élément. Les valeurs des propriétés fill et visibility n'affectent pas le traitement des événements.
stroke
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement si le pointeur de la souris est au-dessus du périmètre (i.e., 'contour') de l'élément. Les valeurs des propriétés stroke et visibility n'affectent pas le traitement des événements.
all
SVG uniquement. L'élément peut être la cible d'un événement souris uniquement si le pointeur de la souris est au-dessus de l'intérieur (i.e., 'fond') ou du périmètre (i.e., 'contour') de l'élément. Les valeurs des propriétés fill, stroke et visibility n'affectent pas le traitement des événements.

Exemples

Example 1

/* Exemple 1: Rend toutes les images non réactives à tous les événements souris, tels que le dragging, le survol, le clic, etc. */
img {
  pointer-events: none;
}

Exemple 2

Rend le lien vers http://example.com non-reactif.

<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
  pointer-events: none;
}

Remarques

Notez qu'empêcher un élément d'être la cible d'événements souris en utilisant pointer-events ne veut pas nécessairement dire que les écouteurs d'événements souris sur cette élément ne peuvent pas ou ne vont pas être déclenchés. Si la propriété pointer-events de l'un des éléments enfants est explicitement définie de manière à autoriser cet élément enfant à être la cible d'événements souris, alors n'importe quel événement ciblant cet élément enfant passera à travers le parent, comme l'événement traverse toute la chaine parente, et déclenche les écouteurs d'événements sur les éléments parents appropriés. Bien entendu, toute activité de la souris sur un point de l'écran qui est couvert par l'élément parent mais non par l'élément enfant ne sera pas capturée ni par l'élément enfant ni par l'élément parent (il traversera l'élément parent et ciblera ce qui est en-dessous).

Nous aimerions fournir un contrôle plus fin (c'est-à-dire, plus qu'auto et none)  en HTML pour définir les parties d'un élément qui "capturent" les événements souris, et dans quelles conditions. Afin de nous aider à décider des futures extensions de la propriété pointer-events pour le HTML, s'il y a quoique ce soit que vous aimeriez pouvoir faire avec cette propriété, ajoutez-la dans la section "Use Cases" de cette page wiki (ne vous souciez pas de la garder en ordre).

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation  

L'extension aux éléments HTML, malgré sa présence dans les premiers brouillons de la CSS Basic User Interface Module Level 3, a été repoussé au Level 4.

Compatibilité navigateur

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support SVG 1.0 1.5 (1.8) 9.0 9.0 (2.0) 3.0 (522)
Contenu HTML/XML 2.0 3.6 (1.9.2) Pas de support Pas de support 4.0 (530)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basic ? ? ? ? ?

See also

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, avetisk, SiegfriedEhret
Dernière mise à jour par : teoli,
Masquer la barre latérale