Obsługa myszy i klawiatury w JavaScript

Mouse

Poziom średnio-zaawansowany

Zapraszam do artykułu, w którym postaramy się kompleksowo ale zwięźle, podejść do tematu obsługi myszy i klawiatury w JavaScript. Zobaczymy też jak popularne framework’i mogą nam w tym pomóc.

Obsługa myszy i klawiatury w JavaScript

Rozważania należało by rozpocząć od zdarzeń (events), ponieważ to głównie na ich obsłudze będzie polegało przetwarzanie danych z podstawowych urządzeń wejściowych.

Zdarzenia dla myszki w JavaScript:

onclick – pojedyncze kliknięcie (naciśnięcie i zwolnienie przycisku myszy),

ondblclick – podwójne kliknięcie,

onmouseover – kursor myszy znalazł się nad elementem (w obszarze elementu)

onmousemove – kursor myszy został przesunięty,

onmouseout – kursor myszki znalazł się poza elementem (opuścił jego obszar),

onmousedown – wciśnięcie klawisza myszki,

onmouseup – zwolnienie klawisza myszki.

Ponadto dostępne są (poprzez obiekt event) parametry dla zdarzeń myszy:

clientX oraz clientY – współrzędne względne kursora myszy (względem elementu który dostarczył procedurę obsługi zdarzenia),

screenX oraz screenY – ekranowe / bezwzględne współrzędne kursora myszy,

button – numer wciśniętego przycisku myszy,

altKey – określa czy klawisz Alt jest wciśnięty,

ctrlKey – określa czy klawisz Control jest wciśnięty,

shiftKey – określa czy klawisz Shift jest wciśnięty.

Zdarzenia klawiatury to natomiast:

onkeypress – klawisz został wciśnięty,

onkeydown – klawisz został naciśnięty,

onkeyup – klawisz został zwolniony.

Obsługa myszy w JavaScript

Mając do czynienia ze zdarzeniami, pierwsze co się nasuwa to zaimplementować ich obsługę. Tyczy się to zarówno obsługi myszy, jak i klawiatury.

Tak jak w poniższym, prostym przykładzie:


document.onmousedown = mouseDown;

function mouseDown(e) {
  alert('Przyciśnięto');
}

// document.onmousemove = xyz;
// myElement.onmouseup = foobar;
// etc ...

Do zdarzenia onmousedown elementu (w przykładzie akurat document czyli cały dokument) przypisaliśmy funkcję obsługi. Tak to się odbywa.

Pobieranie współrzędnych kursora myszy odbywa się poprzez pobranie odpowiednich parametrów z obiektu typu event:

document.onclick = function(e) {
    e = e || window.event;
    
    var pX = 0;
    var pY = 0;
    
    if (e.pageX || e.pageY) {
        pX = e.pageX;
        pY = e.pageY;
    } else if (e.clientX || e.clientY) {
        pX = e.clientX + document.body.scrollLeft;
        pY = e.clientY + document.body.scrollTop;
    }
    
    // console.log([pX, pY]);
    alert(pX);
    alert(pY);
};

Nie chciałem pobierać jej na bieżąco (na przykład w zdarzeniu onmousemove), dlatego obsługa przypisana jest do zdarzenia onclick (kliknięcie) elementu (dla uproszczenia znowu document).

Powyższy kod zwróci współrzędne miejsca, w którym kliknięto myszką.

Oczywiście przypisanie możemy też zrobić w samym HTML. Na przykład określić funkcję, która zostanie wywołana gdy najedziemy myszą na dany element:

<div style="border: solid 1px red; width: 400px; height: 250px" 
    onmouseover="myFunc()" />

Gdy to nastąpi, zostanie wywołana funkcja myFunc().

Określanie przycisku myszy, który został wciśnięty, umożliwia parametr button obiektu event.

Standardowo numery wyglądają następująco: 0 dla lewego przycisku myszy, 1 dla środkowego i 2 dla prawego.

Poniższy prosty przykład obsługi kliknięcia podaje numer wciśniętego przycisku myszy:

document.onclick = function(e) {
    e = e || window.event;
    alert(e.button);

    // sprawdzanie prawego przycisku myszy
    if (e.button == 2) alert('Prawy');

};

Obsługa myszy w JavaScript a framework’i

W pewnością warto poszukać też rozwiązań wspierających nas w pracy nad obsługą myszy, i co ważne dające rezultaty cross-browser.

Osobiście jestem w tym przypadku wielkim fanem jQuery, oferujące duże możliwości oraz prostotę użycia jednocześnie.

Gorąco polecam spis zdarzeń obsługiwanych przez jQuery. Na każdej podstronie znajdziemy dobrej jakości przykłady użycia.

Jeśli ktoś preferuje podejście Dojo Toolkit, również nie będzie rozczarowany. Programista otrzymuje do ręki moduł dojo/mouse.


Mouse middle button czyli środkowy przycisk myszy

Czy jak kto woli – kółeczko, którego celem jest raczej przewijanie zawartości niż kliknie. JavaScript i jego biblioteki oferują także wsparcie w oprogramowaniu obsługi tego przycisku, oraz przewijania rzecz jasna.

Najprostszy przypadek to obsługa zdarzenia onscroll dokumentu, ale na ścisłość dotyczy to przewijania w ogóle (użycie paska przewijania), a nie tylko użycie środkowego przycisku myszy.

Przykład:

document.onscroll = function(e) {
    alert('Przewijam!');
};

W przypadku obsługi przewijania polecam możliwości oferowane przez bibliotekę MooTools, a konkretnie MouseWheel. Na podanej stronie znajdziemy bardzo zgrabny przykład użycia MooTools do obsługi przycisku przewijania.

Nie zapominam także o jQuery. W projektach nad którymi pracowałem, używano czasami pluginu jquery.mousewheel. Sprawdza się znakomicie, jeśli chcemy na przykład zaimplementować własny scroll-bar do przewijania zawartości elementu w naszym UI.

Przejdźmy teraz do klawiatury.

Obsługa klawiatury w JavaScript

Podobnie jak w przypadku myszy, nasza obsługa bazuje na zdarzeniach:

element.onkeydown = func1;

element.onkeypress = func2;

element.onkeyup = func3;

Rozważmy przykład. Zdefiniujmy event listener dla zdarzenia keydown:

window.addEventListener('keydown', function(event) {
    var key = event.keyCode;
    alert(key);
    alert(String.fromCharCode(key));
}, false);

Zmienna key zawiera kod ASCII znaku, natomiast po przetworzeniu (String.fromCharCode(key)) otrzymujemy właściwy znak.

Najłatwiej jest operować na kodach znaków – poprzez przyrównania. Można użyć spisu kodów, takiego jak dostępny tutaj, czy też tego artykułu, który porusza także kwestię skrótów klawiszowych.

Jako ciekawszy przykład – kod poniżej to szkielet obsługi strzałek (lewo, prawo, góra, dół) na klawiaturze. Typowo może zostać użyty do przesuwania elementu na ekranie, nawet w kontekście programowania gier.

window.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37: // Left
      alert('Lewo');
    break;

    case 38: // Up
      alert('Góra');
    break;

    case 39: // Right
      alert('Prawo');
    break;

    case 40: // Down
      alert('Dół');
    break;
  }
}, false);

Spójrzmy teraz co oferują framework’i JavaScript.

Obsługa zdarzeń klawiatury jest w jQuery bezbolesna:

$(document).keydown(function(event) {
  alert('You pressed ' + event.keyCode);
  event.preventDefault();
});

W taki sposób obsłużyliśmy zdarzenie onkeydown. Wywołanie metody event.preventDefault() zapobiega wywołaniu domyślnej akcji, jaka następuje po danym zdarzeniu.

Lista zdarzeń obsługiwanych przez jQuery oraz przykłady znajdują się tutaj.

Dojo Toolkit również oferuje nam swoje ciekawe podejście do obsługi klawiatury.

Ext JS nie pozostaje w tyle i oferuje nam Ext.KeyMap.

Podsumowanie

Na zakończenie przedstawię kilka linków do stron o podobnej tematyce, jak i ciekawych bibliotek.

Linki:

– FAQ na temat zdarzeń myszy i klawiatury

http://www.javascripter.net/faq/keyboardmouseevents.htm

– dość szczegółowy artykuł na temat obsługi klawiatury na stronach Mozilla

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

– tutorial o tworzeniu własnej wirtualnej klawiatury z użyciem jQuery i CSS

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

Inne biblioteki:

– keymaster – prosta biblioteka pozwalająca definiować skróty klawiszowe dla aplikacji WWW

https://github.com/madrobby/keymaster

– biblioteka Keypress

http://dmauro.github.io/Keypress/

Keypress library

Keypress library

Ta swego rodzaju wirtualna klawiatura, pozwala na przechwytywanie wejścia klawiatury użytkownika. Z punktu widzenia programisty, z pewnością warto także zajrzeć do jej kodów źródłowych.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.