2017年2月5日日曜日

cross browserでのタッチ操作

Webサイトをタッチ操作に対応させようとしたところ、非常に苦労したため、得られた成果をまとめておこうと思います。
目指すゴールは手持ちのデバイスでドラッグ・スライドを実現することです。Webでは変化が目まぐるしいのでこの記事が対象とする現時点での環境を挙げておきます。

  • SurfacePro / Windows 10 / mouse, touch, pen
    • Internet Explorer 11
    • Edge 14
    • Chrome 56
    • Firefox 51
  • MacBook Air / OS X / mouse
    • Safari
    • Chrome 56
  • iPhone SE / iOS 10.2 / touch
    • Safari
  • Xperia / Android 4.1.2 / touch, mouse
    • Chrome
    • Firefox
  • Fire HD 8 / Fire OS 5.3.2.1 / touch, mouse
    • Chrome
    • Firefox

ブラウザーは従来よりMouse Eventsを提供していましたが、最近はmouse・touch・pen等を統一的に扱えるPointer Eventsが提供されています。ただし対応状況としてはIE11 / Edge / Chromeが対応、Firefox / Safariが未対応のようです。これとは別にTouch Eventsが提供されていますが、こちらはChrome / iOS / Androidが対応、IE11 / Edge / Firefoxが未対応のようです。総合すると
  1. Pointer Eventsに対応ならPointer Eventsのみ
  2. Pointer Eventsに未対応でTouch Eventsに対応ならTouch EventsとMouse Eventsの両方
  3. Pointer EventsとTouch Eventsに未対応ならMouse Eventsのみ
と分岐しつつ複数を併用する必要がありそうです。

さてイベントの登録・削除は従来はIEに制限がありましたがIE9以降はaddEventListenerのみで実現できます。しばしば第3引数useCaptureにfalseが渡されますが、対応していなかったのはFirefox 6未満のようですので省略して構わないでしょう。

タッチ操作の場合、ページのスクロールなどブラウザー側の処理と競合します。この問題についてはtouch-actionというCSSプロパティが用意されています。対応状況としてはIE11 / Edge / Chromeが対応、Firefoxが次バージョンで対応、Safariが一部のみ対応ということで、これとは別の対策も必要です。実のところSafariではpreventDefault()メソッドを使って抑止することになっています。

ブラウザー側の処理にはこれ以外もあり、Pointer EventsやTouch Eventsが処理されなかった場合は互換のためにMouse Eventsが呼ばれることになっています。これらについてもpreventDefault()メソッドで抑止できることになっています。

以上を踏まえて書いたコードがこちら