【JavaScript】「Firefox wheel touch-action PC Windows タッチデバイス タッチパネル タッチイベント JavaScript」でお困りの方へ

JavaScriptでFirefoxだけPC上でのタッチイベントやホイールイベントが色々おかしい場合、大抵以下のどれかが該当するかもです。

Firefox は touch-action が効かない

Firefoxはデフォルトのタッチ操作を無効にするCSSの 「 touch-action 」 が2016年7月時点で未実装のようです。他の主要ブラウザは大体対応してるのになぁ。
https://developer.mozilla.org/ja/docs/Web/CSS/touch-action

そのため、Windows 8 や Windows 10でのタッチ操作がおかしくなります。

  • JSでスクロール操作させたいのに「テキストを選択」する
  • 「mousemove」イベントが正常に発火しない

スクロール制御に限定して言えば、スクロールさせたい要素に「 oveflow-y:scroll; 」を入れ、必要に応じてスクロールバーを非表示にすることで暫定的に対応は可能です。
http://qiita.com/naru0504/items/ff0c77775223dc5a9148

Firefoxだけスクロール量が少ない?

ホイール系のイベントに関して言えば、色々あるので詳細は以下
https://w3g.jp/blog/wheelevent_crossbrowser

Firefox17からサポートされているwheel(deltaX, deltaY, deltaZ)ですが、他のブラウザと比べて非常に少ない値を設定しているようです。例えばChromeやIEだと50〜100ぐらいある値が、Firefoxだと3とか4とかだったりします。

一見、Firefoxだけ値を20倍とかにすれば良いんじゃと思うのですが、そうすると Windows 8 や Windows 10でのタッチ操作で値が多すぎる(速度が早くなり過ぎる) という問題が発生します。ホイール操作かタッチ操作かを判断する術も現状なさそう?

そこで暫定的な解決方法にはなりますが、Firefoxのみ実装されている 「MozMousePixelScroll」 の値は、ホイール操作もタッチ操作も似たような値が取得できたため、

var eventName = 'MouseScrollEvent' in window ? 'MozMousePixelScroll' : 'onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel';
window.addEventListener(eventName, function() {
    //タッチやホイール操作時に行いたい処理
});

みたいな形で対応すれば良いのかなと思います。