Obsługa kliknięcia oraz naciśnięcia klawisza w JavaScript

Jak pewnie część czytelników wie, zajmuję się - oprócz różnych innych rzeczy - badaniem dostępności stron internetowych. W swojej codziennej pracy notorycznie napotykam elementy aktywne, którym przypisano zdarzenie kliknięcia myszą, ale zapomniano o użytkownikach, którzy myszą się nie posługują. W praktyce nie jest to gigantyczny problem. Większość przeglądarek uruchamia zdarzenie onClick po naciśnięciu klawisza enter na elemencie aktywnym, któremu nie zdefiniowano zdarzenia klawiaturowego. Znacznie większym błędem będzie źle napisana funkcja obsługi zdarzenia klawiatury, która będzie "więziła" klawiaturę.

Postanowiłem napisać więc krótki artykuł, który pozwoli uniknąć obydwu typów błędów. Jego sercem będzie prosta funkcja JavaScript reagująca zarówno na kliknięcie myszą, jak i na naciśnięcie klawisza "ENTER".

Zacznijmy od naszego hipotetycznego elementu aktywnego. Niech będzie nim link. Dlaczego? A dlatego, ze musi on być w stanie otrzymać fokus klawiatury. Jeżeli dodali byśmy obsługę zdarzenia na przykład do elementu <span>, to nie bylibyśmy w stanie umieścić na nim fokusa klawiatury.

<a href="#">Oto element aktywny</a>

Powyższy kod pozwoli nam taki link utworzyć. Chcemy po kliknięciu tego linku ukryć jakiś element blokowy - powiedzmy udający okienko. Dodajmy więc do naszego linku obsługę kliknięcia:

<a href="#" onClick="pop()">Oto element aktywny</a>

oraz funkcję obsługującą nasze zdarzenie:

function pop() {
   document.getElementById('popUp').style.display='none';
}

Świetnie. Nasza funkcja działa. Realizuje też postawione przed nią zadanie - ukrywa element o identyfikatorze popUp. Są z nią jednak dwa problemy:

• link ma prawo nie zadziałać po wywołaniu z poziomu klawiatury
• po kliknięciu linku strona zostanie przewinięta do początku

Zajmijmy się w pierwszej kolejności pierwszym problemem. Dodajemy do linku obsługę za pomocą klawiatury:

<a href="#" onClick="pop(ev)" onKeyPress="pop(ev)">Oto element aktywny</a>

W tym momencie stworzyliśmy kolejny problem. Co prawda link zostanie uruchomiony także za pomocą klawiatury, ale uruchomiony zostanie także, gdy użytkownik wciśnie klawisz "TAB" aby przenieść się do kolejnego aktywnego elementu. Aby temu zaradzić zmodyfikujemy dodatkowo naszą funkcję. Będziemy potrzebowali obiektu zdarzenia. Dlatego właśnie pojawił się on w nawiasach. Zmodyfikowana funcja przyjmie następujący wygląd:

function pop(ev) {
   if (!ev) ev = window.event;
   if (ev.type = ‘click’ || (ev.type == ‘keypress’ && ev.keyCode = ‘13’))
      document.getElementById('popup').style.display='none';
}

Pierwsza linijka wewnątrz nowej funkcji sprawdza, czy zmienna ev została ustawiona. W jakim celu? Starsze wersje ulubionej przeglądarki wszystkich webmasterów - Internet Explorera - miały z tym problem. Instrukcja warunkowa pozwala nam go obejść.

W kolejnej linijce znajduje się kolejna instrukcja warunkowa. Sprawdza ona czy zdarzenie jest typu 'click', lub typu 'keypress'. Pierwszy przypadek - uruchamiamy zdarzenie po kliknięciu myszą. Jeżeli jednak zdarzenie jest typu 'keypress', to musimy sprawdzić jaki klawisz został naciśnięty. Interesuje nas klawisz o kodzie 13, czyli klawisz "ENTER". W takim przypadku uruchamiamy zdarzenie.

Pozostał nam jeszcze problem przenoszenia się do początku strony po aktywowaniu linku. Aby go wyeliminować, potrzebujemy jeszcze jedną linijkę kodu. Finalna wersja naszej funkcji będzie wyglądała tak:

function pop(ev) {
   if (!ev) ev = window.event;
   if (ev.type = ‘click’ || (ev.type == ‘keypress’ && ev.keyCode = ‘13’))
      document.getElementById('popup').style.display='none';
   ev.preventDefault();
}

Komentarza wymaga chyba tylko to, czemu nie zdecydowałem się uruchomić ostatniej linijki wewnątrz wyrażenia warunkowego. Postąpiłem tak, ponieważ nie chcę, aby strona przewijała się do początku po kliknięciu myszą lub naciśnięciu dowolnego klawisza - nie tylko klawisza "Enter". Dlatego też ostatnia linia kodu wykonuje się niezależnie od warunku widocznego dwie linijki wyżej.