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.

• Valeur initiale auto
• Applies totous les éléments
• Héritéeoui
• Media visuel
• Valeur calculée la valeur spécifiée, sinon la valeur héritée

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

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

See also

• L'attribut SVG pointer-events
• WebKit Specs PointerEventsProperty étendu pour l'usage au sein d'un contenu (X)HTML