マウスホイールイベント処理マニアックス

2. Text マウスホイールイベント処理マニアックス

3. 中野雅之 • 肩書き • 正式: Mozilla Japan 国際化担当マネージャ • 半公式: Mozilla Japan ジョギング部大阪支部長 • 非公式: Mozilla Japan 大阪支部長 • 大阪の自宅で、自宅警備しながら仕事してます

4. 中野雅之 • 色んなアカウント • メールアドレス: masayuki@d-toybox.com • Skype: masayuki-nakano • Twitter: @d_toybox • Facebook: masayuki.nakano.560 • Blog: 「もずはっく日記」で検索

5. アジェンダ • 各プラットフォームのネイティブイベント • レガシーイベント • MouseScrollEvent • MouseWheelEvent • WheelEvent • WheelEventとレガシーイベントの関係 • デフォルトアクションの考え方

6. 各プラットフォームのネイティブイベント

7. 各プラットフォームのネイティブイベント • Windows • WM_MOUESEWHEEL (Win 98以降) • 垂直方向へのホイール操作に対するイベント • マウスホイールの回転量が伝達される • 1ノッチあたり120 • Vista以降では120未満のデルタ値でも発生する (高解像度スクロール) • ページ単位でのスクロールにも設定可能 • WM_MOUSEHWHEEL (Win Vista以降) • 水平方向へのホイール操作に対するイベント • 詳細はWM_MOUSEWHEELと同様

8. 各プラットフォームのネイティブイベント • Mac • -deltaX、-deltaY、-deltaZ • ピクセルスクロールをサポートしていないデバイスで利用 • スクロールする行数を示すと思われる(ドキュメントに明記されていない) • deltaZを利用するデバイスは無い? • -scrollingDeltaX、-scrollingDeltaY • ピクセルスクロールをサポートしているデバイスで利用 • 連続スクロールをサポートするデバイスか否か、という概念がある • OSレベルで操作量・頻度に応じて、加速が行われる • システム設定でスクロール速度はカスタマイズ可能

9. 各プラットフォームのネイティブイベント • Linux • GdkEventScrollというイベントが発生し、スクロール方向のみが分かる • システム設定でもスクロール量は設定できないので、アプリの解釈によってスクロール量が決まる

10. MouseScrollEvent

11. MouseScrollEvent • Firefox独自イベント • Firefoxでは、window.MouseScrollEventは、undefined にはならない • DOMMouseScrollと、MozMousePixelScrollの二つのイベントが存在する • 関係性や動作が非常に複雑

12. MouseScrollEvent • 属性 • detail • スクロール量を表す • 正なら、下、もしくは右方向 • 負なら、上、もしくは左方向 • axis • HORIZONTAL_AXIS (1) なら水平方向 • VERTICAL_AXIS (2) なら垂直方向

13. MouseScrollEvent • DOMMouseScroll • detail値は、スクロールする行数 • detail値がSCROLL_PAGE_DOWN (32768)か、 SCROLL_PAGE_UP (-32768)なら、1ページ、スクロール (Windowsのみ) • MozMousePixelScroll • detail値は、スクロールするピクセル数

14. MouseScrollEvent • DOMMouseScrollとMozMousePixelScrollの関係 • MozMousePixelScrollのスクロール量がtargetの行高で、1行分以上累積した場合にのみ、 DOMMouseScrollイベントも発生する • 両方発生する場合の発生順序は、 DOMMouseScroll が先で、 MozMousePixelScrollが後

15. MouseScrollEvent • DOMMouseScrollとMozMousePixelScrollの関係 • MozMousePixelScrollのみが発生することがあることに注意 • DOMMouseScrollイベントだけでpreventDefault()を呼び出してもスクロールは完全に抑制できない • Google Mapsでも実際に、これが原因のバグがある • Bug 681200 - Mouse wheel on google maps zooms map and scrolls page

16. MouseWheelEvent

17. MouseWheelEvent • IE発祥のイベント。Firefox以外のメジャーブラウザは実装している • ただし、実装方法は、ブラウザ間でバラバラ • IEでのみwindow.MouseWheelEventがundefinedではない (Chrome 27、Safari 6、Opera12.12では、サポートしているにも関わらず、undefined) • mousewheelイベントのみが存在する

18. MouseWheelEvent • 属性 • wheelDelta • ホイールの回転量を表す • 正なら、奥方向、負なら、手前方向へホイールが回転したことを表す • IEでは垂直方向へのホイール操作でしか発生しない • 値については後ほど解説

19. MouseWheelEvent • 属性 • detail値 • Opera以外では常にゼロ • Operaではスクロールする行数を示すと思われる値 • 下、もしくは右への操作なら、正の値 • 上、もしくは左への操作なら、負の値

20. MouseWheelEvent • 属性 • wheelDeltaX • 水平方向へのホイールの回転量を表す • Chrome、Safari、Operaでのみサポート • IE非サポート • 値の内容はwheelDeltaと同様 • 右への操作なら、負の値、左への操作なら正の値

21. MouseWheelEvent • 属性 • wheelDeltaY • 垂直方向へのホイールの回転量を表す • Chrome、Safari、Operaでのみサポート • IE非サポート • 値の内容はwheelDeltaと同様 • 下への操作なら、負の値、上への操作なら正の値

22. MouseWheelEvent • wheelDelta*の値の闇 • IEでは、ネイティブイベントのWM_MOUSEWHEEL、 WM_MOUSEHWHEELのデルタ値がそのまま設定されるため、常に、ホイールの回転量を表す • 高解像度スクロールがサポートされていないデバイスであれば、1ノッチあたり、120になる

23. MouseWheelEvent • wheelDelta*の値の闇 • Windows版Chromeでは、IE同様、ネイティブイベントのWM_MOUSEWHEEL、WM_MOUSEHWHEELのデルタ値がそのまま設定されるため、常に、ホイールの回転量を表す • 高解像度スクロールがサポートされていないデバイスであれば、1ノッチあたり、120になる

24. MouseWheelEvent • wheelDelta*の値の闇 • Mac版Chromeでは、連続スクロールがサポートされていないデバイスの場合、加速を考慮しない値、つまり、純粋な操作量が利用される。手元のマウスでは1ノッチで120 • 連続スクロールがサポートされているデバイスの場合、加速を考慮した値を使用している。おそらく、Safariと同じ結果になる

25. MouseWheelEvent • wheelDelta*の値の闇 • Safariでは、連続スクロールがサポートされているデバイスでも、そうではないデバイスでも関係なく、加速を考慮した値を使用している • 連続スクロールがサポートされていないデバイスの場合、Mac版Chromeとは異なる値になる

26. MouseWheelEvent • wheelDelta*の値の闇 • Mac版Operaでは、連続スクロールがサポートされているデバイスでも、そうではないデバイスでも関係なく、加速を考慮した値を使用している • スクロール量(detail値)に対して、-40倍の値が用いられているため、多くの場合、同じ操作で、Chromeや Safariよりも格段に大きな数字になる

27. MouseWheelEvent • wheelDelta*の値の闇 • Mac版のブラウザでは、加速を考慮した場合には、 Windows版や、Linux版の同じブラウザとも互換性がなくなる • その理由は簡単で、デバイスの操作量を示す物理的なデルタ値のはずが、Macでのみ、論理的なスクロール量に応じて算出した値を用いているため

28. MouseWheelEvent • wheelDelta*の値の闇 • Linux版Chromeでは、1ネイティブイベントあたり、120 がセットされるため、Windows版との互換性が高い • Linux版Operaでは、1ネイティブイベントあたり、80がセットされる

29. レガシーイベントまとめ • Firefoxのみが独自イベントを実装しているが、理解すれば一番実用的(ただし、複雑で好ましいものではない) • IEでは横スクロールに対応できない • Chrome、Safari、Operaでは互換性がなさ過ぎる上に、 Chromeの動作に関しては、ブラウザの名前から処理を切り分けることも不可能にしている • 要するに、Firefox以外では使い物にならない

30. WheelEvent

31. WheelEvent • W3CのDOM Level 3 Eventsで標準化されている • IE 9発祥のイベントで、Firefoxも、17以降でサポート • Safari、Chromeはオブジェクトのみサポートしているため、window.WheelEventは、IE、Firefox、Safari、 Chromeでundefinedとならない • wheelイベントのみが存在し、斜め方向のスクロールもひとつのイベントで表現できるようになっている

32. WheelEvent • 属性 • deltaX、deltaY • X軸、Y軸方向へのスクロール量をdouble値で示す • 正なら、右、もしくは下方向 • 負なら、左、もしくは上方向 • Firefoxでは、Macで加速が行われている場合、その値が反映される

33. WheelEvent • 属性 • deltaZ • Z軸方向へのスクロール量をdouble値で示す • Macのネイティブイベントに存在する概念なので存在すると思われる • FirefoxではMac版でも常にゼロとなる(正負をどうすれば良いのか判断できないため) • 他のOSではそもそもこの概念はない

34. WheelEvent • 属性 • deltaMode • deltaX、deltaY、deltaZの値の単位を表す • DOM_DELTA_PIXEL (0)の場合、ピクセル数 • DOM_DELTA_LINE (1)の場合、行数 • DOM_DELTA_PAGE (2)の場合、ページ数 • delta*がdouble値のため、0.5行のスクロールや、0.5 ページのスクロール、といった表現が可能

35. WheelEvent • IE9 • deltaX、deltaY、deltaZはdouble値ではなく、整数値 • IE9、IE10 • deltaMode値はDOM_DELTA_PIXEL • 行単位のスクロールの場合、1行、もしくは1文字あたり、固定値を乗算した値(参考: Y方向時: 32px (IE10)、 41px (IE9)、おそらく環境・設定依存) • ページ単位のスクロールの場合、そのページの高さ(≠ 実際にスクロールされる要素の高さ)

36. WheelEvent • Firefox • Windows版では、deltaMode値は、DOM_DELTA_LINEか、 DOM_DELTA_PAGE (システム設定依存) • Linux版では、deltaMode値は常に、DOM_DELTA_LINE • Mac版では、deltaMode値は、DOM_DELTA_LINEか、 DOM_DELTA_PIXEL (操作したデバイスがピクセル単位のスクロールをサポートしているか否かに依存) • 各delta値は設定で変更できるため、ゲームの入力のような用途では利用できない

37. WheelEventとレガシーイベントの関係

38. WheelEventとレガシーイベントの関係 • IE、Firefox共通 • "wheel"イベントが発生した後に、レガシーイベントが発生する • "wheel"イベント、レガシーイベントのどちらの preventDefault()でも、デフォルトアクションをキャンセルできる • "wheel"イベントで、preventDefault()を呼び出すと、レガシーイベントは発生しない

39. WheelEventとレガシーイベントの関係 • Firefox • "wheel"イベントの情報と、イベントのターゲットの行高や、targetに一番近い、スクロール可能な要素の幅・高さから、レガシーイベントが生成される

40. WheelEventとレガシーイベントの関係 • まとめると、WheelEventをサポートしているブラウザであれば、"wheel"イベントのみを処理し、それ以外のブラウザでは、"mousewheel"イベントを処理すれば良い • しかし、Chrome、Safariでは、window.WheelEventが undefinedを返さないので正しい判定が不可能になっている

41. WheelEventとレガシーイベントの関係 • イベント処理後に必ず、preventDefault()を呼び出すのであれば、全てのイベントにリスナを設置することで解決する • 例: foo.addEventListener("wheel", wheelHandler, false); foo.addEventListener("mousewheel" mousewheelHandler, false);

42. WheelEventとレガシーイベントの関係 • イベント処理後に、preventDefault()を呼び出さないのであれば、悩ましい。 • "onwheel" in document.bodyはFirefoxではtrueになるが、IEではfalse • window.MouseWheelEventはIE 8以前、Safari、Chrome、 Operaはundefinedを返すので、IE 9以降かどうかの判定に使えるものの、Safari、Chromeが実装を改善すると、破綻するので危険

43. デフォルトアクションの考え方

44. デフォルトアクションの考え方 • preventDefault()を呼び出さない場合に、ブラウザによって実行されるのがデフォルトアクション • モディファイアキー無しであれば、スクロールが一般的 • Windowsであれば、Ctrlキーを押している場合、スクロールではなく、ズームになるのが一般的 • つまり、"wheel"イベントや、レガシーホイールイベントは、スクロールが発生することを予告するイベントではない

45. デフォルトアクションの考え方 • Firefoxでは、マウスホイールの操作にトランザクションの概念があるため、targetに一番近い、スクロール可能な祖先要素がスクロールされるとは限らない(Mouse wheel transaction) • ページ全体にスクロール中に、他のスクロール可能な要素がマウスカーソルの下に移動してきても、ページ全体をスクロール対象として考える(タイムアウトあり) • DOMイベントのtargetは、これに関係なく、常に、カーソルの下にある要素になる

46. デフォルトアクションの考え方 • つまり、デフォルトアクションがスクロールの場合であっても、"wheel"イベントは、実際のデフォルトアクションの内容と一致するとは限らない

47. デフォルトアクションの考え方 • これらのことから言えるのは、"wheel"イベントやレガシーイベントを利用して、独自のスクロール可能な要素を作る場合には細心の注意が必要 • 本当に必要なことか? • アクセシビリティへの配慮は十分か? • 全てのプラットフォームの全てのブラウザの、全ての現役のバージョンでテストする覚悟(予算)はあるか? • 万が一、問題が報告された場合に対応する覚悟(余裕)はあるか?

48. まとめ •できれば、面倒極まりないので、関わらない •やるなら、WheelEventをメインに、がんばる •WebKitとBlink陣営に、WheelEventを実装するようにみんなで声をあげよう!

49. Text Q&A?

マウスホイールイベント処理マニアックス

マウスホイールイベント処理マニアックス

Recommended

More Related Content

Recently uploaded

Recently uploaded(13)

Featured

Featured(20)

マウスホイールイベント処理マニアックス