Webtech Walker

Windows8のChromeやFirefoxはタッチイベントとマウスイベント両方考慮すべし

タッチ系の操作をスマホでもデスクトップPCでも動くようにするため、タッチイベントがある場合はtouchstarttouchmoveを使い、タッチイベントをサポートしていないブラウザではmousedownmousemoveを使って同じ挙動にするというケースがあります。

例えばこういうやつ。

flipsnap.js DEMO

そのようなケースでは僕はこれまで次のように書いていました。

var supportTouch = 'ontouchstart' in window;

var touchStartEvent = supportTouch ? 'touchstart' : 'mousedown';
var touchMoveEvent = supportTouch ? 'touchmove' : 'mousemove';
var touchEndEvent = supportTouch ? 'touchend' : 'mouseup';

element.addEventListener(touchStartEvent, function() { ... }, false);
element.addEventListener(touchMoveEvent, function() { ... }, false);
element.addEventListener(touchEndEvent, function() { ... }, false);

タッチ系のイベントがあるかどうかでバインドするイベントを決める感じです。

しかし、これだとWindows8のChromeやFirefoxでマウスの操作が動きません。Windows8のChromeやFirefoxはタッチイベントをサポートしており、画面をタッチして操作した場合はタッチ系のイベントが、マウスで操作した場合はマウス系のイベントが発火するようになっています。

なので上記のような処理だとタッチ系のイベントしかハンドラがバインドされず、マウスで操作しようとしたときに何もおきないということになります。

対応方法は色々あると思うけど、flipsnap.jsではtouchstartmousedownの両方にイベントをバインドしておいて、それらのイベントリスナの中でmoveイベントとendイベントをバインドし、endイベントでリスナを解除するみたいな感じにしました。

ちなみにWindows8のIE10の場合はまたちょっと話が違ってきていて、MSPointerというポインターイベントがあってそれはこの前書いたのでそっちを参照のこと。

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

このエントリーをはてなブックマークに追加