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

例えばこういうやつ。

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ではtouchstartとmousedownの両方にイベントをバインドしておいて、それらのイベントリスナの中でmoveイベントとendイベントをバインドし、endイベントでリスナを解除するみたいな感じにしました。

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

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