zachowanie po kliknięciu

Zachowanie po kliknięciu to działanie systemu uruchamiane w reakcji na interakcję odbiorcy z odnośnikiem.

Co oznacza reakcja interfejsu na kliknięcie

Zachowanie po kliknięciu opisuje działanie wykonywane przez stronę internetową, aplikację albo system operacyjny po odebraniu interakcji użytkownika. W przypadku odnośnika HTML kliknięcie zwykle powoduje przejście do adresu wskazanego w atrybucie href. Może to być inna strona, konkretny fragment dokumentu oznaczony identyfikatorem, plik do pobrania, adres poczty elektronicznej zapisany jako mailto: albo numer telefonu zapisany jako tel:. Jeżeli odnośnik nie ma dodatkowej obsługi skryptowej, przeglądarka realizuje jego standardowe działanie zgodnie z dokumentem HTML i ustawieniami użytkownika.

Interakcja może również uruchamiać kod JavaScript podłączony do zdarzenia click. Skrypt może otworzyć lub zamknąć panel, zmienić klasę CSS elementu, wyświetlić komunikat, wysłać żądanie HTTP albo rozpocząć odtwarzanie multimediów. Samo kliknięcie nie określa jednak, jakie działanie nastąpi. Wynik zależy od rodzaju elementu, jego atrybutów, reguł arkusza stylów, skryptów oraz aktualnego stanu aplikacji. Ten sam widoczny przycisk może więc wykonywać różne czynności zależnie od tego, czy strona działa online, czy otrzymała już dane z serwera.

Od zdarzenia myszy do wykonania akcji

W przeglądarce kliknięcie jest zdarzeniem interfejsu użytkownika. Dla typowej myszy poprzedzają je między innymi zdarzenia związane z naciśnięciem i zwolnieniem przycisku, a przeglądarka może następnie wygenerować zdarzenie click. Obsługa może zostać przypisana w HTML, w kodzie JavaScript przez właściwość elementu albo przez metodę addEventListener. W praktyce często stosuje się zapis element.addEventListener("click", handler), gdzie funkcja handler otrzymuje obiekt zdarzenia zawierający informacje o interakcji i elemencie, na którym wystąpiła.

Zdarzenia w modelu DOM mogą przechodzić przez hierarchię elementów. Mechanizm propagacji obejmuje fazę przechwytywania, cel zdarzenia oraz fazę bąbelkowania. Dlatego kliknięcie przycisku umieszczonego wewnątrz elementu z własnym nasłuchiwaczem może uruchomić oba handlery. Metoda event.stopPropagation() zatrzymuje dalszą propagację, natomiast event.preventDefault() anuluje domyślną czynność przeglądarki, na przykład przejście pod adres odnośnika. Są to różne operacje: zatrzymanie propagacji nie musi anulować przejścia, a anulowanie domyślnej czynności nie wyłącza wszystkich innych nasłuchiwaczy.

Odnośnik, przycisk i dostępność obsługi

Element <a> powinien służyć do nawigacji, a element <button> do wykonania operacji w bieżącym interfejsie, takiej jak otwarcie menu, zatwierdzenie formularza lub zmiana widoku. Rozróżnienie ma znaczenie dla działania klawiatury, technologii asystujących i przewidywalności interfejsu. Aktywny odnośnik można zwykle uruchomić klawiszem Enter, natomiast przycisk obsługuje także typowe użycie klawiszem Spacja. Zastępowanie tych elementów zwykłym <div> z obsługą kliknięcia może pozbawić użytkownika klawiatury właściwego sposobu uruchomienia akcji.

Poprawne zachowanie po kliknięciu wymaga także określenia stanu elementu. Przycisk rozpoczynający żądanie do serwera powinien zostać odpowiednio oznaczony lub czasowo zablokowany, aby wielokrotne kliknięcia nie wysłały kilku identycznych operacji. Po otrzymaniu odpowiedzi interfejs powinien zaktualizować komunikat, listę albo stan kontrolki. Jeżeli żądanie zakończy się błędem, użytkownik powinien otrzymać informację o wyniku zamiast obserwować pozornie nieaktywne okno. W przypadku formularzy trzeba rozróżnić kliknięcie przycisku od właściwego wysłania formularza, ponieważ formularz może zostać zatwierdzony również klawiszem Enter.

Sprawdzanie nieprawidłowej reakcji w serwisie

Analiza problemu z kliknięciem zaczyna się od ustalenia, czy element jest rzeczywiście aktywny, czy nie zasłania go inny komponent oraz czy przeglądarka rejestruje zdarzenie. W narzędziach deweloperskich można sprawdzić strukturę DOM, style wpływające na widoczność i możliwość interakcji, a także konsolę JavaScript. W zakładce sieciowej warto zweryfikować, czy kliknięcie powoduje żądanie, jaki adres jest wywoływany, jaki kod odpowiedzi zwraca serwer i czy przeglądarka nie blokuje zasobu z powodu błędnego adresu lub polityki bezpieczeństwa. Przydatne jest również sprawdzenie działania strony po odświeżeniu, w innej przeglądarce oraz bez rozszerzeń modyfikujących treść.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, dlatego w przypadku problemów z aplikacją lub przeglądarką można rozpocząć diagnostykę od ustalenia, czy źródłem usterki jest sprzęt, system, sterownik, konfiguracja programu czy sama strona internetowa. W praktyce sprawdza się między innymi stabilność systemu, aktualność przeglądarki, działanie klawiatury i myszy oraz występowanie błędów widocznych w aplikacji. Takie rozdzielenie warstw pozwala odróżnić uszkodzony element wejściowy od błędnej obsługi zdarzenia w kodzie strony.