Dzisiaj wracam do tematu obsługi ekranów dotykowych, o której pisałem w jednym z ostatnich wpisów. Wspomniałem wówczas, że w Internet Explorer wygląda to wszystko trochę inaczej… Dlatego też dziś mam zamiar Wam pokazać jak wygląda obsługa ekranów dotykowych w IE.

Na wstępie zaznaczę, że zdarzenia wskaźnika (ang. pointer events) pojawiły się wraz z wypuszczeniem przez Microsoft Internet Explorera 10 – w wydaniu tym, wprowadzono zupełnie odmienny od opisanego przeze mnie poprzednio, model obsługi zdarzeń zarówno myszki jak i dotyku. Microsoft postanowił zunifikować obsługę tych dwóch rodzajów zdarzeń, jako że de facto służą one temu samemu – wskazywaniu i operowaniu stroną internetową. W związku z powyższym, w przeglądarce Internet Explorer nie ma już rozróżnienia na myszkę i dotyk… Taka unifikacja jest moim zdaniem krokiem w dobrym kierunku,zresztą podjęte zostały kroki by takie podejście ustandaryzować – dzięki temu od wersji 11 IE, zdarzenia wskaźnika straciły przedrostek MS. Szkoda tylko, że IE10 nadal jest w szerokim użyciu… A inne przeglądarki nie obsługują jeszcze tego modelu… Ale o tym więcej za chwilę.

Najważniejsze zdarzenia

Wpisem dzisiejszym chciałbym jedynie pokazać podstawy obsługi dotykowych ekranów w Internet Explorer, dlatego skupię się tylko na opisie kilku najważniejszych z nich. Nie przedłużając, poniżej ich lista:

  • pointerdown – dotknięcie palcem ekranu
  • pointermove – przesuwanie po ekranie
  • pointerup – zabranie palca z ekranu
  • pointerover – wyzwalany w momencie gdy przesuwany palec wjedzie na dany element DOM
  • pointerout – odpalany kiedy palec opuszcza element DOM

Jak pewnie zauważyliście, widać tutaj analogię do zdarzeń myszki… To nie przypadek, ponieważ opisywane zdarzenia zostały tak zaprojektowane, że po wyzwoleniu zdarzenia „pointer…” wyzwalane jest odpowiadające mu zdarzenie „mouse…” (oczywiście tylko dla pierwszego kontaktu palca z ekranem, w końcu myszką nie obsłużymy „multidotyku”) – jest to robione po to, aby istniejące strony internetowe, które nie zostały przystosowane do obsługi na ekranach dotykowych, nadal działały przy użyciu palca.

Obiekty powyższych zdarzeń zawierają wszystkie właściwości dostępne standardowo w obiektach zdarzeń myszki. Oprócz tego dodano do nich kilka dodatkowych „propertiesów”. Oto one:

  • height – wysokość przestrzeni dotykanej przez palec
  • width – szerokość przestrzeni dotykanej przez palec (obie te wartości w pikselach)
  • isPrimary – określa czy dany wskaźnik jest pierwszym (dotyczy „multidotyku”)
  • pointerId – unikalny identyfikator wskaźnika
  • pointerType – określa źródło znacznika (np. myszka, dotyk, rysik itd.)
  • pressure – siła nacisku wskaźnika na ekran (wartości od 0 do 1)
  • tiltX, tiltY – przechylenie wskaźnika względem ekranu (?)

Wykrywanie wsparcia dla zdarzeń wskaźnika

Projektując opisywane rozwiązanie, Microsoft okazał się bardzo zapobiegliwy i przygotował odpowiednie metody do wykrywania czy dana przeglądarka potrafi obsługiwać zdarzenia wskaźników oraz czy urządzenie posiada ekran dotykowy. Poniżej sposób na sprawdzenie pierwszego z przypadków:

if (window.PointerEvent) {
  // zdarzenia wskaźników są obsługiwane
  // czyli jesteśmy w IE 11
}

Kolejne przykłady pokazują sprawdzanie sprzętu jakim posługuje się użytkownik:

// sprawdź czy w ogóle jest to ekran dotykowy
if (navigator.maxTouchPoints) { ... }

// dodatkowo czy „multidotyk” jest obsługiwany
if (navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// sprawdź ile maksymalnie punktów dotyku może być obsłużonych
var touchPoints = navigator.maxTouchPoints;

Wszystko fajnie, sposób na wykrycie obsługi wskaźników jest. Tylko, że dotyczy to tylko IE 11… w IE 10 dla zdarzeń wskaźników obowiązywał przedrostek „MS”, chcąc więc napisać kod obsługujący ekran dotykowy działający na IE10, IE11 a do tego jeszcze na Firefoxie, Chromie i innych, musimy zrobić coś takiego:

if (window.PointerEvent) {
    element.addEventListener("pointerdown", callback);
} else if (window.MSPointerEvent) {
    element.addEventListener("MSPointerDown", callback);
} else {
    element.addEventListener("touchstart", callback);
}

Super! A do tego dołożyć jeszcze trzeba kod dla nie Internet Explorerowych przeglądarek, który obsłużyłby zdarzenia myszki…

Obsługa ekranów dotykowych w IE - podsumowanie

To tyle jeśli chodzi o to jak wygląda obsługa ekranów dotykowych w IE. Myślę, że już wystarczy tego biadolenia – nie zamieściłem żadnego konkretnego przykładu użycia takiego zdarzenia ponieważ po pierwsze jest ich pełno w necie, a po drugie robi się to analogicznie do obsługi myszki. Najbardziej zależało mi na pokazaniu, jak bardzo różnice między implementacjami w poszczególnych przeglądarkach potrafią popsuć nam życie – moim zdaniem jest to jeden z lepszych tego przykładów… I tym optymistycznym akcentem… ;)