SVG/Tutorials/pointer-events

Der Begriff pointer-events ist mehrdeutig.
Dieser Artikel behandelt die CSS-Eigenschaft pointer-events. Sie ist nicht zu verwechseln mit der geichnamigen Pointer Event API.

Die Eigenschaft pointer-events ermöglicht es, Elemente gezielt von Interaktionen durch Maus und teilweise auch Tastatur auszuschließen. Es war ursprünglich Teil der SVG-Spezifikation, um genauer zu kontrollieren, wo in einer Form ein Benutzer interagieren kann.

Browserunterstützung
caniuse.com

pointer events in CSS

Erlaubt sind dabei folgende Werte

• auto, das Element verhält sich „ganz normal“ so, als ob pointer-events nicht gesetzt wäre, Voreinstellung
• none, das Element reagiert nicht auf Interaktionen
• inherit, übernimmt den Wert des Elternelements

sich überlagernde Textblöcke ansehen …

    p.nicht_klickbar {
        pointer-events: none;
    }
    p.beispiel {
        border: thin solid #d5d5d5;
        ...
    }
    p.beispiel+p {
        position: relative;
        width: auto;
        padding: 3em;
        margin: 0 auto -7em;
        top: -8em;
        background-color: rgb(150 150 200 / 0.3);
        color: #c32e04;
    }

ansehen …

Die jeweils zweiten Absätze sind so verschoben, dass sie ihre Vorgänger überdecken. Im Normalfall ist deshalb der Text des darunterliegenden Elements nicht mit der Maus auswählbar. Wird für den überdeckenden Absatz festgelegt, dass dieser nicht auf Interaktionen mit der Maus reagieren soll, so hat dies zur Folge, dass nun der überdeckte Absatz mit der Maus bedienbar ist.

Beachten Sie: Enthält das Element, welches nicht mehr auf Interaktionen mit der Maus reagieren soll, keine fokussierbaren Elemente, ist sein Inhalt auch nicht mit der Tastatur auswählbar.

Beispiel ansehen …

a:hover, a:focus, a:active {
  background-color: #f1f3f4;
  color: #c32e04;
}
a[href="http://example.com"] {
  pointer-events: none;
}

<ul>
  <li><a href="http://selfhtml.org">selfhtml.org</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

Der Link zu example.com ist nicht mehr mit der Maus oder per Fingertap erreichbar.

ansehen …

pointer-events bestimmt, ob ein Element mit der Maus ausgewählt werden kann.

Anwendungsbeispiel

dreistufiger Klickschalter ansehen …

<fieldset>
    <input id="tn-vielleicht" type="radio" name="teilnahme" value="0" checked="checked">
    <label for="tn-vielleicht">vielleicht</label>
    <input id="tn-nein" type="radio" name="teilnahme" value="-1">
    <label for="tn-nein">nein</label>
    <input id="tn-ja" type="radio" name="teilnahme" value="1">
    <label for="tn-ja">ja</label>
</fieldset>

label{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 5em;
    padding: .5em;
    border: 2px solid #c32e04;
    text-align: center;
}
:checked + label {
    z-index: 10;
    pointer-events: none;
}
:checked + label + input + label {
    pointer-events: none;
}
input {
    display: none;
}

Das Beispiel zeigt einen Button, der 3 Status haben kann. Technisch handelt es sich um eine Gruppe von drei Radiobuttons. Mithilfe absoluter Positionierung werden die drei label-Elemente übereinander positioniert. Dasjenige Label, was zum ausgewählten Radiobutton gehört, wird durch die Angabe eines z-index sichtbar, für pointer-events werden sowohl dieses als auch das im Quelltext folgende label-Element unempfänglich gemacht.

ansehen …

pointer-events und SVG

pointer-events kennt noch weitere Werte, die allerdings nur für SVG gültig sind.

• visiblePainted,
• visibleFill,
• visibleStroke,
• visible,
• painted,
• fill,
• stroke,
• all,

Siehe auch

• Referenz: pointer-events

Quellen