Mój mikro cykl o obsłudze ekranów dotykowych w JavaScript miał się zakończyć na poprzednim wpisie na ten temat, jednak szperając w google w poszukiwaniu materiałów do tych wpisów, natknąłem się na kilka JavaScriptowych bibliotek, które jak się okazuje pozwalają objeść problemy o których pisałem ostatnio. Postanowiłem więc, że fajnie będzie dopisać jeszcze jeden post na temat i opowiedzieć o jednej z takich właśnie bibliotek, a mianowicie Hand.js.

Przedstawiam Hand.js

Hand.js jest biblioteką, która powstała aby umożliwić pisanie kodu obsługującego ekrany dotykowe z użyciem zdarzeń wskaźnika czyli tych stworzonych przez Microsoft na potrzeby Internet Explorer. I rzeczywiście działa to fajnie… Ale może przejdźmy do przykładu – jak już pisałem w poprzednim wpisie, zdarzenia wskaźnika pomyślane zostały tak, by obsługiwać jednocześnie różne rodzaje wskaźników, w tym myszkę. Zatem spójrzmy najpierw na kod napisany pod zdarzenie „mousemove”:

<canvas id="drawSurface" width="400px" height="400px" style="border: 1px dashed black;"></canvas>
<script>
  var canvas = document.getElementById(drawSurface);
  var context = canvas.getContext('d');

  context.fillStyle = rgba(200,255, 200, .5);
  canvas.addEventListener('mousemove', paint, false);

  function paint(event){
    context.fillRect(event.clientX, event.clientY, 10, 10);
  }
</script>

Jak widać powyżej, mamy tutaj obiekt „canvas” na którym ruszając myszką możemy „rysować” – możecie sobie to przetestować w tym jsfiddle. Myślę, że przykład jest na tyle prosty, że nie muszę się wgryzać w jego szczegóły;)

Jeśli teraz zamienilibyśmy zdarzenie „mousemove” na „pointermove”, to taki kod będzie działał tylko w Internet Explorer 11 (zarówno dla myszki jak i dla innych rodzajów wskaźników). Dla porządku zmieniony kod HTML/JS:

<canvas id="drawSurface" width="400px" height="400px" style="border: 1px dashed black;"></canvas>
<script>
  var canvas = document.getElementById(drawSurface);
  var context = canvas.getContext('d');

  context.fillStyle = rgba(200, 255, 200, .5);
  canvas.addEventListener('pointermove', paint, false);

  function paint(event) {
    context.fillRect(event.clientX, event.clientY, 10, 10);
  }
</script>

No więc skoro taki kod nie działa w moim Firefoxie (ani w innych Operach i Safari), to co zrobić? Ano właśnie, wystarczy że podłączymy do naszego kodu skrypt Hand.js (do pobrania tutaj) i to tyle – zdarzenia wskaźnika grają i śpiewają! Zresztą możecie to sami sprawdzić w tym jsfiddle ;)

Podsumowanie

I to tyle – okazuje się, że ktoś miał takie same odczucia co do tej niekompatybilności co ja i postanowił temu zaradzić… Fajnie, że z dobrym skutkiem.