W tym artykule dowiemy się, jak wyłączyć zdarzenie kliknięcia za pomocą CSS.

A więc zacznijmy!

Jak wyłączyć zdarzenie kliknięcia za pomocą CSS?

Zdarzenia kliknięć można wyłączyć za pomocą CSS „ wskaźniki-wydarzenia ' własność. Ale wskakując do tego, pokrótce ci to wyjaśnimy.

Co to jest właściwość CSS „pointer-events”?

„ wskaźniki-wydarzenia ” określają, w jaki sposób elementy HTML reagują lub zachowują się na zdarzenie dotyku, takie jak zdarzenia kliknięcia lub dotknięcia, stany aktywności lub najechania oraz czy kursor jest widoczny, czy nie.

Składnia
Składnia zdarzeń wskaźnika jest następująca:

Wspomniana wyżej właściwość przyjmuje dwie wartości, takie jak „ automatyczny ' oraz ' Żaden ”:

• automatyczny: Służy do wykonywania domyślnych zdarzeń.
• Żaden: Służy do wyłączania zdarzeń.

Uwaga: Poniższy przykład pokaże najpierw, jak dodać dwa aktywne przyciski, a następnie wyłączymy zdarzenie kliknięcia drugiego przycisku.

Przykład 1: Wyłączanie zdarzenia kliknięcia przycisków za pomocą CSS
W tym przykładzie utworzymy nagłówek

i dwa przyciski. Następnie określ „ przycisk ” jako nazwę klasy pierwszego przycisku i przypisz „ przycisk ' oraz ' przycisk2 ” jako klasy drugiego przycisku.

HTML

< div >
< h1 > Wyłącz zdarzenie kliknięcia za pomocą CSS < / h1 >
< przycisk klasa = 'przycisk' > Włącz przycisk < / przycisk >
< przycisk klasa = 'przycisk przycisk 2' > Wyłącz przycisk < / przycisk >
< / div >

W CSS „ .przycisk ” służy do uzyskiwania dostępu do obu przycisków utworzonych w pliku HTML. Następnie ustaw styl obramowania jako „ Żaden ” i podaj dopełnienie jako „ 25px ”. Następnie ustaw kolor tekstu przycisku jako „ rgb(29, 6, 31) ” a tło przycisku jako „ rgb(19, 192, 163) ”. Ustawimy również promień przycisku jako „ 5px ”.

CSS

.przycisk {
granica : Żaden ;
wyściółka : 25px ;
kolor : RGB ( 29 , 6 , 31 ) ;
kolor tła : RGB ( 19 , 192 , 163 ) ;
promień-granicy : 5px ;
}

Następnie zastosujemy pseudoklasę :active na obu przyciskach jako „ .przycisk:aktywny ” i ustaw kolor przycisku na „ RGB(200, 255, 0) ”:

.przycisk : aktywny {
kolor tła : RGB ( 209 , 65 , 65 ) ;
}

W rezultacie zobaczysz następujący wynik:

Teraz przejdziemy do następnej części, w której wyłączymy zdarzenie kliknięcia dla drugiego przycisku.

Aby to zrobić, użyj „ .przycisk 2 ”, aby uzyskać dostęp do drugiego przycisku, utworzonego w pliku HTML, a następnie ustaw wartość właściwości pointer-events na „ Żaden ”:

.przycisk 2 {
wskaźniki-wydarzenia : Żaden ;
}

Użycie właściwości pointer-events i ustawienie jej wartości na non spowoduje wyłączenie zdarzenia kliknięcia, co można zobaczyć w następujących danych wyjściowych:

Udostępniliśmy najłatwiejszą metodę wyłączenia zdarzenia kliknięcia za pomocą CSS.

Wniosek

Aby wyłączyć zdarzenie kliknięcia w HTML, „ wskaźniki-wydarzenia wykorzystywana jest właściwość CSS. W tym celu dodaj element HTML i ustaw wartość właściwości pointer-events na „ Żaden ”, aby wyłączyć zdarzenie kliknięcia. W tym artykule wyjaśniono, jak wyłączyć zdarzenie kliknięcia za pomocą CSS wraz z jego przykładem.