Zdarzenia wskaźnikowe - CSS-Tricks

Ta pointer-eventswłaściwość pozwala kontrolować, w jaki sposób elementy HTML reagują na zdarzenia myszy / dotyku - w tym stany najechania / aktywności CSS, zdarzenia kliknięcia / dotknięcia w JavaScript oraz czy kursor jest widoczny.

.avoid-clicks ( pointer-events: none; )

Chociaż pointer-eventswłaściwość przyjmuje jedenaście możliwych wartości, wszystkie z wyjątkiem trzech są zarezerwowane do użytku z SVG. Trzy prawidłowe wartości dowolnego elementu HTMl to:

none zapobiega wszystkim opcjom kliknięcia, stanu i kursora na określonym elemencie HTML
autoprzywraca domyślną funkcjonalność (przydatne do użycia na elementach potomnych elementu z pointer-events: none;określonym
inheritużyje pointer-eventswartości rodzica elementu

Sprawdź ten długopis!

Jak pokazano powyżej, głównym przypadkiem użycia dla pointer-eventsjest umożliwienie kliknięcia lub stuknięcia na „przejście” przez element do innego elementu znajdującego się pod nim na osi Z. Na przykład przydałoby się to w przypadku nakładek graficznych lub ukrywania elementów za pomocą opacity(np. Etykietek narzędzi) i nadal pozwalając na zaznaczanie tekstu w zawartości poniżej.

Użyteczne miejsca

„Stosowanie zdarzeń wskaźnikowych w CSS dla elementów innych niż SVG jest eksperymentalne. Ta funkcja była kiedyś częścią szkicowej specyfikacji interfejsu użytkownika CSS3, ale z powodu wielu otwartych problemów została przeniesiona do CSS4 ”. - Mozilla MDN
„Jeśli dodasz detektor zdarzenia kliknięcia do elementu, a następnie usuniesz styl zdarzenia pointerka (lub zmienisz jego wartość na auto, zdarzenie kliknięcia uruchomi wyznaczoną funkcjonalność. Zasadniczo zdarzenie kliknięcia uwzględnia wartość zdarzenia wskaźnika).” - David Walsh

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.