Strona główna / Poradniki

Jak działa wizualny wybór elementu na stronie, która się broni

Wskazanie elementu brzmi prosto, dopóki strona nie ucieknie spod kursora. Co picker musi przechwycić, do czego przyskakuje i wywołanie selektora, które rzuca wyjątkiem.

Opublikowano 12 sierpnia 2026 · Autor: hsynkvlc

Każde narzędzie do tagów w końcu dorabia się pickera elementów: włącz tryb, najedź na stronę, kliknij to, o co Ci chodzi, odbierz selektor. Pomysł mieści się w jednym zdaniu. Sprawienie, żeby działał na prawdziwej stronie — z własnymi obsługami kliknięć, własną nawigacją i własnym zdaniem na temat z-index — wymaga znacznie więcej.

Kliknięcie nie może dotrzeć do strony

Klikasz działającą stronę. To kliknięcie jest prawdziwe: przycisk wysyła formularz, link nawiguje, modal się otwiera, a strona, którą wskazywałeś, znika, zanim selektor zostanie odczytany.

Dlatego picker nasłuchuje w fazie przechwytywania, nie w fazie bąbelkowania — widzi zdarzenie w drodze w dół, przed obsługami samej strony — a potem wywołuje i preventDefault(), i stopPropagation(). Jedno nie wystarczy: preventDefault zatrzymuje domyślną akcję przeglądarki, a stopPropagation sprawia, że listenery strony w ogóle go nie zobaczą.

Podświetlenie nie może zjadać własnego hovera

Oczywisty sposób pokazania, co zaraz wybierzesz, to ramka narysowana na wierzchu. Oczywista implementacja psuje się natychmiast: gdy tylko ramka znajdzie się pod kursorem, mouseover odpala się na ramce, a nie na elemencie, i podświetlenie zaczyna gonić samo siebie.

Naprawiają to dwie rzeczy. pointer-events: none na nakładce, żeby była dla myszy niewidzialna. I zabezpieczenie w obsłudze hovera, które wprost ignoruje nakładkę i jej plakietkę, bo strona wciąż może wysyłać do nich zdarzenia.

Jeszcze jeden szczegół wart podkradnięcia: przyciemnienie reszty strony nie wymaga drugiego elementu. Pojedynczy box-shadow: 0 0 0 9999px rgba(0,0,0,.1) na podświetleniu zamalowuje wszystko poza nim — jeden element zamiast czterech i żadnego układu do synchronizowania.

Hover odpala znacznie częściej, niż da się rysować

Na gęstej stronie mouseover przychodzi wiele razy na klatkę. Przestawianie ramki przy każdym z nich to praca na marne, która objawia się zacinaniem dokładnie na stronach najtrudniejszych do wskazania. Sprowadź to do jednej aktualizacji na klatkę przez requestAnimationFrame i za każdym razem anuluj poprzednią.

Do czego powinien przyskakiwać

Klikasz etykietę; przeglądarka zgłasza najgłębszy element pod kursorem, czyli <span> wewnątrz przycisku. Selektor tego spana to nie jest to, czego chce reguła kliknięcia.

Picker wchodzi do najbliższego przodka, który naprawdę jest klikalny:

• a, button, [role="button"]
• [onclick], input[type="submit"], input[type="button"]
• label — bo kliknięcie w nią uruchamia powiązaną kontrolkę
• [data-gtm] — ktoś oznaczył ten element dokładnie w tym celu; uszanuj to

Jeśli nad kliknięciem nie ma żadnego z nich, odpowiedzią jest sam kliknięty element. Znajomość tej listy jest praktyczna, nie akademicka: mówi, co picker Ci poda, zanim cokolwiek naciśniesz.

Escape musi kogoś powiadomić

Picker anulujący się na Escape to absolutne minimum. Łatwo przeoczyć co innego: panel, który poprosił o wybór, jest osobnym kontekstem i czeka. Anuluj po cichu, a będzie czekał aż do swojego timeoutu, pokazując spinner nad stroną, na której nic już się nie dzieje. Anulowanie musi wrócić jako wynik, nie jako brak.

Wywołanie selektora, które rzuca wyjątkiem

Sprawdzenie, czy kandydat na selektor jest unikalny, oznacza wywołanie querySelectorAll i policzenie wyników. To wywołanie nie zwraca zera dla wadliwego selektora — rzuca wyjątkiem. A współczesne nazwy klas są pełne znaków, które selektor unieważniają: hover:bg-blue-500 ma dwukropek, md:w-1/2 dwukropek i ukośnik.

Potrzebne są więc dwie linie obrony i obie są konieczne. Escapuj nazwy klas przy budowaniu selektora i tak czy inaczej opakuj liczenie dopasowań w try/catch — bo dzień, w którym wyjątek przejdzie nieobsłużony, to dzień, w którym picker po cichu umiera na jakiejś stronie, a Ty nie masz pojęcia dlaczego.

Gdy najechanie jest niemożliwe

Na niektóre rzeczy nie da się najechać. Lista rozwijana zamykająca się przy zjechaniu myszą, znikający tooltip, menu składające się w chwili, gdy kursor je opuści — element, którego chcesz, znika w drodze do kliknięcia.

Obejście polega na porzuceniu kursora: zaznacz tekst wewnątrz elementu tak, jak zaznaczasz go do skopiowania, i pozwól narzędziu odczytać zaznaczenie. Kotwicą zaznaczenia jest zwykle węzeł tekstowy, więc chodzi o jego element nadrzędny. Ta sama logika selektora, zero najeżdżania.

Dlaczego to Cię obchodzi

Bo kiedy picker poda Ci coś zaskakującego, to są tego powody. Przyskoczył do przycisku zamiast do spana przez listę przodków. Nie zwrócił nic, bo nazwy klas zepsuły selektor. Wyglądał na zawieszony, bo anulowanie nigdy nie wróciło. Znajomość mechanizmu zamienia narzędzie, które czasem dziwaczeje, w takie, które da się przewidzieć.

Powiązane poradniki

• Zamiana przechwyconych pushy dataLayer w kontener GTM gotowy do importu
• Jedno kliknięcie, trzy pushe: wybór właściwego zdarzenia dataLayer
• Jak debugować server-side GTM