flipsnap.jsでIE10のPointer Eventsに対応した

flipsnap.jsをWindows8のIE10のタッチで動くようにしました。

思ったより簡単に対応できました。diffはこんな感じ。

IE10 for touch device support. Fix #13 · 0524fef · pxgrid/js-flipsnap

IE10はiOSやAndroidのようにtouchstartやtouchmoveのようなタッチイベントが用意されておらず、代わりにタッチした際に、pointerイベントというイベントが発火します。

まだMSPointerDownのようにMSというprefixがついています。

element.addEventListener('MSPointerDown', function() {
  // タッチが始まった時の処理
}, false);

element.addEventListener('MSPointerMove', function() {
  // タッチが動いている時の処理
}, false);

element.addEventListener('MSPointerUp', function() {
  // タッチが終わった時の処理
}, false);

基本的にはmouseイベントやtouchイベントと同じように使えるので、イベント名だけ変更すれば対応はできます。また、window.navigator.msPointerEnabledの値を見てpointerイベントが使用可能かどうかを判断することができます。

var support = {
  mspointer: window.navigator.msPointerEnabled,
  touch: 'ontouchstart' in window
};

var touchStartEvent =
    support.mspointer ? 'MSPointerDown' :
    support.touch ? 'touchstart' :
    'mousedown';

element.addEventListener(touchStartEvent, function() {
  // タッチが始まった時の処理
}, false);

また、1点注意が必要で、CSSで-ms-touch-action: none;というのを指定しないとタッチしたときにネイティブのスクロールなどが優先されてpointerイベントがちゃんと発火しません。JavaScriptからこのプロパティを設定するには次のようにします。

if (support.mspointer) {
  element.style.msTouchAction = 'none';
}

CSSでやるならこうです。

#element {
  -ms-touch-action: none;
}

今回のflipsnap.jsでの対応は将来的にまだpointerイベントがどうなるかわからないのでMSのプレフィックス限定で対応しています。将来的にプレフィックスが外れたり他のブラウザでも対応が始まった場合はその都度対応していく予定です。

また、Windows8のタッチ対応端末で確認したところ、Chromeはtouchイベント、Firefoxはmouseイベントが発火していたのでそのままで使えてました。なかなかタッチイベントまわりカオスな状況ですね。