これまでマウスイベントの扱いは、以下のような記述方法でした。
var elem = document.getElementById("hoge"); if ( elem.addEventListener ) { // IE9以上/Firefox/Chrome elem.addEventListener("mousedown", fn); } else { // IE8以下向け下位互換対策 elem.attachEvent("onmousedown", fn); } }
上記はマウスが存在するという前提で成立していたもので、今後はマルチデバイス対応が求められる時代になります。
今のところはデスクトップ型向けとスマートデバイス型とでは、ユーザエージェントを使ってビューを切り替えるという方法が主流のようです。しかし今後は、Windows 8的マウスもタッチデバイスもいるような環境が当たり前になるかと思います。どんなページであっても、Webページは複数種類のデバイスから扱われることを前提とすべきでしょう。
Web標準では、これを柔軟に解決するための方法を提供しています。
1. Pointer Eventsの考え方
Web標準では、マウス/タッチパネル/ペンなどのデバイスは、「ポインター」という抽象的なデバイスとして扱うことで、デバイスの差異を吸収します。もちろん従来のマウスのイベントを利用してもタッチパネルは扱えますが、標準に準拠した統一された動作を実現するには、「ポインター」を利用する必要があるでしょう。
既存のマウスイベントについても、「ポインター」である程度カバーできているため、今後のことを考えるとこの手段に置き換えることが望ましいです。
2013年、現時点での現実的な記述方法としては、こうなります。
var elem = document.getElementById("hoge"); if(navigator.pointerEnabled) { // IE11以上＋モダンブラウザ用(※現在推奨) elem.addEventListener("pointerdown", fn); } else if (navigator.msPointerEnabled) { // IE10+Win8の下位互換対策(※2016年1月中旬まで必要) elem.addEventListener("MSPointerDown", fn); } else if ( elem.addEventListener ) { // IE9もしくはIE10+Win7向け下位互換対策(※2020年1月まで必要) elem.addEventListener("mousedown", fn); } else { // IE8以下向け下位互換対策(※2020年1月まで必要) elem.attachEvent("onmousedown", fn); }
すごく長いですね・・・。IEに独自実装されていたattacheEvent(※11から削除)にも配慮しつつ、新しいイベントの記述方法まで意識しなくてはいけない。もはや、ハックに近い行為です・・・。
ただ、Windows 7が世の中から消えた頃には、こうなっています。
var elem = document.getElementById("hoge"); elem.addEventListener("pointerdown", fn);
ドキュメントは、W3Cサイトにて「Pointer Events」として公開されています。日本語だと、MicrosoftのIE11周りのドキュメントが一番上手くまとまっているように思えます。
(※参考 : ポインターイベント - Microsoft )
2. 出遅れた入力周りの標準
IEは、2バージョンワンセットの傾向があり、IE5と6、7と8、9と10とで、同じ動作傾向、バグの共有が行われていることから、おおよそ同じコードベースが使われているものと考えられます。
(※参考 : IE5-6、7-8共通のPNG表示不具合 - ふろしき.js )
そして、ディスプレイ周り、所謂レスポンシブWebデザイン対応についてはIE9世代で整備されましたが、入力周りについては、Appleのマルチタッチ特許のなど諸々の問題が絡み、本格的な対応はIE11世代からとなったようです。
IE11はWindows 8系の最低バージョンになりますので、実用性という面ではWindows 7系が衰退したころでしょう。
