入力デバイス機能

Chrome 47 には、ユーザーがサイトをどのように利用しているかを簡単に把握できる新機能 InputDeviceCapabilities が導入されています。なぜこれが重要なのかを 少し戻っておきましょう。

DOM 入力イベントは低レベルの入力イベントを抽象化し、 物理デバイス入力(click イベントは、マウス、タッチスクリーン、キーボードによって発行できます。ただし、問題があるのは、イベントを担当している実機の詳細を取得する簡単な方法がないことです。

また、互換性上の理由から、特定の種類の入力においては、さらに「架空の」DOM 入力イベントが生成される可能性があります。このような架空の DOM イベントは、ユーザーがタッチ スクリーン(スマートフォンなど)をタップしたときに発生します。このイベントでは、タッチイベントだけでなく、互換性の理由からマウスイベントも発生します。

このため、デベロッパーがマウス入力とタップ入力の両方をサポートすると問題が発生します。mousedown イベントが、実際にマウスからの新しい入力を表すものなのか、以前に処理された touchstart イベントに対する互換性イベントなのかを判断するのは困難です。

新しい InputDeviceCapabilities API は、UIEvent の sourceCapabilities オブジェクトを介して、入力イベントの基盤となるソースに関する詳細を提供します。
オブジェクトの firesTouchEvents プロパティは、ユーザー アクションによるイベントの生成方法に基づいて true または false に設定されます。

問題は、これをどこで使用すべきか、ということです。

現在、ポインタ イベント以外では、多くのデベロッパーがタッチレイヤのインタラクションのロジックを処理しているため、デフォルトで「偽の」マウスイベントが作成されないようにしています。この設計は多くのシナリオで適切に機能し、InputDeviceCapabilities を利用するための変更は必要ありません。

しかし、状況によっては、タップイベントに対して「クリック」イベントを送信し、フォーカスを変更したい場合など、タップ時に「クリック」イベントを送信して、フォーカスを変更したい場合があります。このような場合、MouseEvent.sourceCapabilities.firesTouchEvents プロパティに保持されている情報により、タッチイベントとマウスベースのイベントのロジックを、ポインタ イベントでロジックを管理する方法とよく似たモデルに統合できます。つまり、インタラクション ロジックを管理するコードセットを 1 つだけ用意できるため、デベロッパーはポインタ イベントをサポートするブラウザとサポートしないブラウザの間でロジックを簡単に共有できます。

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

幸いなことに、これは Rick Byers によってポリフィルされているため、ほとんどのプラットフォームで使用できます。

現在、この API は最小限であり、タッチイベントから派生したマウスイベントを識別するための特定の問題を解決することに焦点を当てています。InputDeviceCapabilities のインスタンスをインスタンス化することもできますが、含まれるのは firesTouchEvents のみです。将来的には、ユーザーのシステム上のすべての入力デバイスについてより詳しく理解できるように、拡張が予定されています。ユースケースに関するフィードバックをお待ちしています。