CSS - Pointer Events: Ein Anfängerleitfaden

Hallo da draußen, angehende Webentwickler! Heute tauchen wir in die aufregende Welt der CSS-Pointer-Events ein. Machen Sie sich keine Sorgen, wenn Sie neu hier sind – ich werde Sie Schritt für Schritt durchführen, genau wie ich es in den letzten Jahren mit unzähligen Schülern gemacht habe. Also holen Sie sich eine Tasse Kaffee (oder Ihr Lieblingsgetränk) und los geht's!

Was sind Pointer Events?

Bevor wir ins Detail gehen, lassen Sie uns darüber sprechen, was Pointer Events eigentlich sind. Stellen Sie sich vor, Sie sind in einem Museum und daneben steht ein Schild mit der Aufschrift "Nicht berühren" neben einem wunderschönen Gemälde. Dieses Schild ist wie ein Pointer Event in CSS – es kontrolliert, wie Sie mit Elementen auf einer Webseite interagieren.

In CSS ermöglicht die Eigenschaft pointer-events, wie HTML-Elemente auf Maus-/Touch-Events reagieren. Es ist, als würde man Ihren Webseiten-Elementen Superkräfte verleihen!

Die Syntax von Pointer Events

Fangen wir mit der grundlegenden Syntax an:

auswahl {
pointer-events: wert;
}

Einfach, oder? Lassen Sie uns nun die möglichen Werte ansehen.

Mögliche Werte für Pointer Events

Hier ist eine Tabelle aller möglichen Werte für die Eigenschaft pointer-events:

Wert	Beschreibung
auto	Das Element verhält sich so, als wäre die Eigenschaft nicht angegeben
none	Das Element ist niemals Ziel von Pointer Events
visiblePainted	Nur SVG. Das Element kann nur Ziel eines Pointer Events sein, wenn die Eigenschaft visibility auf visible gesetzt ist und wenn der Mauszeiger über einem "bemalten" Bereich ist
visibleFill	Nur SVG. Das Element kann Ziel von Pointer Events sein, wenn die Eigenschaft visibility auf visible gesetzt ist und wenn der Mauszeiger über dem Inneren des Elements ist
visibleStroke	Nur SVG. Das Element kann Ziel von Pointer Events sein, wenn die Eigenschaft visibility auf visible gesetzt ist und wenn der Mauszeiger über dem Umfang des Elements ist
visible	Nur SVG. Das Element kann Ziel von Pointer Events sein, wenn die Eigenschaft visibility auf visible gesetzt ist
painted	Nur SVG. Das Element kann nur Ziel eines Pointer Events sein, wenn der Mauszeiger über einem "bemalten" Bereich ist
fill	Nur SVG. Das Element kann nur Ziel von Pointer Events sein, wenn der Mauszeiger über dem Inneren des Elements ist
stroke	Nur SVG. Das Element kann nur Ziel von Pointer Events sein, wenn der Mauszeiger über dem Umfang des Elements ist
all	Nur SVG. Das Element kann Ziel von Pointer Events sein, wenn der Mauszeiger entweder über dem Inneren oder dem Umfang des Elements ist

Machen Sie sich keine Sorgen, wenn einige davon verwirrend erscheinen – wir werden uns auf die am häufigsten verwendeten Werte für reguläre HTML-Elemente konzentrieren.

Anwendung von Pointer Events

Die Eigenschaft pointer-events kann auf die meisten HTML-Elemente angewendet werden. Sie ist besonders nützlich, um Interaktionen mit Bildern, Links und anderen klickbaren Elementen zu steuern.

CSS pointer-events: none Wert

Fangen wir mit einem häufigen Anwendungsfall an. Stellen Sie sich vor, Sie haben einen Knopf, den Sie vorübergehend deaktivieren möchten:

<button id="myButton">Klicke mich!</button>

#myButton {
pointer-events: none;
opacity: 0.5;
}

In diesem Beispiel haben wir pointer-events: none auf den Knopf gesetzt. Das bedeutet, der Knopf wird auf keine Maus-Events reagieren – es ist, als hätten wir eine unsichtbare Schutzwand darübergelegt. Wir haben auch die Deckkraft reduziert, um eine visuelle Anleitung zu geben, dass er deaktiviert ist.

CSS pointer-events: auto Wert

Nun, sagen wir, wir möchten den Knopf wieder aktivieren:

#myButton {
pointer-events: auto;
opacity: 1;
}

Durch das Setzen von pointer-events: auto sagen wir dem Browser, Pointer-Events auf diesem Element wie gewohnt zu behandeln. Es ist, als hätten wir die unsichtbare Schutzwand entfernt.

Deaktivierung von Pointer Events auf Bildern

Hier ist ein kleiner Trick, den ich meinen Schülern gerne zeige. Manchmal möchte man ein Bild "durchklickbar" machen – das bedeutet, man kann auf Elemente dahinter klicken. Hier ist, wie man das macht:

<div class="container">
<img src="cute-cat.jpg" alt="Ein niedliches Kätzchen" class="overlay-image">
<button>Klicke mich!</button>
</div>

.container {
position: relative;
}

.overlay-image {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

In diesem Beispiel haben wir ein Bild, das einen Knopf überlagert. Durch das Setzen von pointer-events: none auf das Bild erlauben wir Klicks, "durch" das Bild zum Knopf darunter zu gelangen.

Wichtige Punkte zu beachten

1. Die Eigenschaft pointer-events beeinflusst nicht nur Maus-Events – sie wirkt sich auch auf Touch-Events auf mobilen Geräten aus.
2. Die Verwendung von pointer-events: none macht ein Element nicht unsichtbar – es macht es nur nicht interaktiv.
3. Seien Sie vorsichtig bei der Verwendung von pointer-events: none auf wichtigen navigativen Elementen, da es die Zugänglichkeit beeinträchtigen kann.

Schlussfolgerung

Und da haben Sie es, Leute! Wir haben die Welt der CSS-Pointer-Events durchquert. Denken Sie daran, wie bei jeder mächtigen Werkzeug, verwenden Sie es weise. In den Jahren meines Unterrichts habe ich gesehen, wie Schüler einige truly erstaunliche interaktive Erfahrungen mit dieser Eigenschaft geschaffen haben.

Üben Sie mit diesen Beispielen, experimentieren Sie und haben Sie keine Angst vor Fehlern – das ist, wie wir lernen! Vor Ihnen wissen werden Sie Pointer-Events wie ein Profi steuern, dynamische und interaktive Webseiten erstellen, die Ihre Benutzer begeistern werden.

Weiterschreiben, weiterlernen und vor allem, haben Sie Spaß! Bis zum nächsten Mal, fröhliches Styling!

Credits: Image by storyset