ふろしき Blog

インターネットビジネスの基本知識やWebテクノロジー、エンジニア組織論について、経験談を交えつつお話します

HTML5世代のJavaScriptからマウスイベントの扱い方、Pointer Events

この記事は古くなっています。こちらを参照して下さい。

これまでマウスイベントの扱いは、以下のような記述方法でした。

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の考え方

f:id:furoshiki0223:20131209163332p:plain

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世代からとなったようです。

f:id:furoshiki0223:20131209170322p:plain

IE11はWindows 8系の最低バージョンになりますので、実用性という面ではWindows 7系が衰退したころでしょう。

このブログの筆者について

川田 寛

株式会社メディアドゥのVP of Engineering。ネットでは「ふろしき」と呼ばれている。

2009年、新卒としてNTTグループにて仮想化技術・Web標準の研究と技術コンサルティングに従事。2015年よりピクシブ株式会社にて、Webエンジニア・エンジニアリングマネージャー・事業責任者・執行役員などを通じて、技術組織のデザインと技術系の新規事業に関わる。2021年12月より、現職へとジョイン。

ネット事業と技術組織は表裏一体!良いネット事業は良い技術組織から!日本のコンテンツを一つでも多く世界へ届けるべく、技術組織デザインと新規事業の二足の草鞋を履いて邁進中。

このブログでは、主に「インターネット事業のビジネス基本知識」「Webテクノロジーのトレンド」「エンジニア組織の設計手法」について、経験談を交えつつ解説していきます。私と話をしてみたいという方は、以下のフォームより気軽にご連絡ください。

お問い合わせフォーム
免責事項: 本ブログの発言は個人の見解であり、所属組織を代表するものではありません。