Poniższy post wyjaśni, w jaki sposób właściwość zdarzenia wskaźnika jest używana w kodzie do wyłączania łącza w dokumencie HTML.
Wyłączanie linku za pomocą CSS
Biblioteka CSS jest używana w połączeniu z innymi językami, takimi jak HTML. Tak więc, jeśli dokument HTML zawiera łącze prowadzące bezpośrednio do dowolnej innej strony internetowej, właściwość CSS pointer-events służy do wyłączenia łącza:
zdarzenia wskazujące : nic ;
kursor : domyślny ;
Jak korzystać z właściwości pointer-events w kodzie?
Instrukcja w stylu CSS, w której dodamy właściwość pointer-events, aby wyłączyć łącze, powinna odnosić się do klasy, która zawiera łącze. Na przykład, jeśli mamy klasę o nazwie „nieaktywna”, która zawiera link:
< h1 > Wyłącz link za pomocą CSS < / h1 >< br >
< B > Połączyć: < / B >
< A href = 'https://www.google.com/' klasa = 'nieaktywny' > Kliknij tutaj < / A >
W powyższym kodzie klikalny link ma klasę „nieaktywna”, która zostanie użyta do uzyskania dostępu do tego elementu HTML.
Powyższy kod generuje następujące dane wyjściowe:
Kliknięcie w link kieruje użytkownika do wyszukiwarki Google:
Właściwość zdarzenia wskaźnika
- Wewnątrz elementu stylu CSS zapisz właściwość zdarzenia wskaźnika ( zdarzenie wskaźnika: brak ), odnosząc się do klasy (nieaktywnej) zawierającej łącze, które należy wyłączyć.
- Ustaw kursor jako dowolną z opcji, takich jak domyślna, brak, wskaźnik itp.
.nieaktywny {
zdarzenia wskazujące : nic ;
kursor : domyślny ;
}
>
Po wykonaniu kodu nie nastąpi zmiana graficznego wyświetlenia linku z zewnątrz, ale gdy użytkownik w niego kliknie, nic się nie stanie:
To był najłatwiejszy sposób na wyłączenie łącza w kodzie za pomocą instrukcji CSS.
Wniosek
Link, który kieruje użytkownika do innych stron internetowych, można łatwo wyłączyć za pomocą prostej właściwości CSS „pointer-events: none”. Nie wymaga to żadnych zmian w logice kodu ani w klasie, w której link został utworzony. Wymagana jest prosta właściwość zdarzenia wskaźnika w elemencie stylu odnosząca się do klasy zawierającej łącze.