In diesem Artikel erfahren wir, wie Sie das Klickereignis mit CSS deaktivieren.

So lass uns anfangen!

Wie deaktiviere ich das Klickereignis mit CSS?

Sie können Klickereignisse mit dem CSS „ Zeigerereignisse ' Eigentum. Aber wenn wir darauf eingehen, werden wir es Ihnen kurz erklären.

Was ist die CSS-Eigenschaft „Zeigerereignisse“?

Das ' Zeigerereignisse ” steuern, wie die HTML-Elemente auf das Berührungsereignis reagieren oder sich verhalten, z. B. Klick- oder Tippereignisse, aktive oder schwebende Zustände, und ob der Cursor sichtbar ist oder nicht.

Syntax
Die Syntax von Pointer-Events ist wie folgt:

Die oben erwähnte Eigenschaft nimmt zwei Werte an, z. B. „ Auto ' und ' keiner “:

• Auto: Es wird verwendet, um Standardereignisse auszuführen.
• keiner: Es wird verwendet, um Ereignisse zu deaktivieren.

Hinweis: Das folgende Beispiel zeigt zunächst, wie zwei aktive Schaltflächen hinzugefügt werden, und dann deaktivieren wir das Klickereignis der zweiten Schaltfläche.

Beispiel 1: Deaktivieren des Klickereignisses von Schaltflächen mit CSS
In diesem Beispiel erstellen wir eine Überschrift

und zwei Schaltflächen. Geben Sie als Nächstes das „ Taste “ als Klassenname der ersten Schaltfläche und weisen Sie „ Taste ' und ' Knopf2 “ als die Klassen der zweiten Schaltfläche.

HTML

< div >
< h1 > Klickereignis mit CSS deaktivieren < / h1 >
< Taste Klasse = 'Taste' > Schaltfläche aktivieren < / Taste >
< Taste Klasse = 'Taste Taste2' > Schaltfläche deaktivieren < / Taste >
< / div >

Im CSS „ .Taste “ wird verwendet, um auf beide Schaltflächen zuzugreifen, die in der HTML-Datei erstellt wurden. Legen Sie als Nächstes den Rahmenstil als „ keiner “ und geben Sie Polsterung als „ 25px “. Stellen Sie danach die Farbe des Schaltflächentextes als „ RGB(29, 6, 31) “ und der Schaltflächenhintergrund als „ RGB(19, 192, 163) “. Wir werden auch den Radius einer Schaltfläche als „ 5px “.

CSS

.Taste {
Grenze : keiner ;
Polsterung : 25px ;
Farbe : rgb ( 29 , 6 , 31 ) ;
Hintergrundfarbe : rgb ( 19 , 192 , 163 ) ;
Grenzradius : 5px ;
}

Danach wenden wir die Pseudo-Klasse :active auf beide Schaltflächen als „ .Schaltfläche:aktiv “ und stellen Sie die Farbe der Schaltfläche als „ RGB(200, 255, 0) “:

.Taste : aktiv {
Hintergrundfarbe : rgb ( 209 , 65 , 65 ) ;
}

Als Ergebnis sehen Sie das folgende Ergebnis:

Jetzt gehen wir zum nächsten Teil über, in dem wir das Klickereignis für die zweite Schaltfläche deaktivieren.

Verwenden Sie dazu „ .button2 “, um auf die zweite Schaltfläche zuzugreifen, die in der HTML-Datei erstellt wurde, und setzen Sie danach den Wert der Eigenschaft „pointer-events“ auf „ keiner “:

.button2 {
Zeigerereignisse : keiner ;
}

Wenn Sie die Eigenschaft pointer-events verwenden und ihren Wert auf non setzen, wird das Click-Ereignis deaktiviert, was in der folgenden Ausgabe zu sehen ist:

Wir haben die einfachste Methode zum Deaktivieren des Klickereignisses mithilfe von CSS bereitgestellt.

Fazit

Um das Klickereignis in HTML zu deaktivieren, muss das „ Zeigerereignisse ”-Eigenschaft von CSS wird verwendet. Fügen Sie zu diesem Zweck ein HTML-Element hinzu und setzen Sie den Wert der Eigenschaft pointer-events auf „ keiner “, um das Click-Ereignis zu deaktivieren. In diesem Artikel wurde erklärt, wie Sie das Klickereignis mithilfe von CSS zusammen mit seinem Beispiel deaktivieren.