輸入裝置功能

Paul Kinlan

Chrome 47 推出一項新功能，可讓您更輕鬆瞭解使用者與網站互動的方式：InputDeviceCapabilities！讓我們先退一步，瞭解為何這麼做很重要。

DOM 輸入事件是低層級輸入事件的抽象概念，與實體裝置輸入 (例如 click 事件可由滑鼠、觸控螢幕或鍵盤觸發。不過，這裡有個問題：沒有簡單的方法，可以取得負責事件的實體裝置詳細資料。

此外，某些類型的輸入內容會基於相容性因素產生「假」DOM 輸入事件。使用者輕觸觸控螢幕 (例如手機) 時，就會發生這類假 DOM 事件；這類事件不僅會觸發觸控事件，也會基於相容性原因觸發滑鼠事件。

這會導致開發人員在同時支援滑鼠和觸控輸入時發生問題。很難判斷 mousedown 事件是否確實代表滑鼠的新輸入內容，還是只是先前處理的 touchstart 事件的相容性事件。

新的 InputDeviceCapabilities API 會透過 UIEvent 上的 sourceCapabilities 物件，提供輸入事件的基礎來源詳細資料。
這個物件具有 firesTouchEvents 屬性，會根據使用者動作產生事件的方式，設為 true 或 false。

問題是：應在何處使用？

除了指標事件之外，許多開發人員現在會在觸控層中處理互動邏輯，以免預設情況下建立「假」滑鼠事件。這項設計在許多情況下都運作良好，而且無須變更即可充分運用 InputDeviceCapabilities。

但在某些情況下，您可能不想對觸控事件使用 preventDefault，例如您仍希望輕觸動作傳送「點擊」事件並變更焦點。在這些情況下，您可以透過 MouseEvent.sourceCapabilities.firesTouchEvents 屬性中儲存的資訊，開始將觸控和滑鼠事件的邏輯整合至模型，這與您使用指標事件管理邏輯的方式相似。也就是說，您只需要一組程式碼即可管理互動邏輯，並為開發人員提供更簡單的方式，在支援和不支援指標事件的瀏覽器之間共用邏輯。

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

好消息是，Rick Byers 已為此功能提供Polyfill，因此您可以在大多數平台上使用。

目前這個 API 的功能相當有限，主要著重於解決特定問題，即如何識別來自觸控事件的滑鼠事件。甚至可以將 InputDeviceCapabilities 例項化為例項，但只包含 firesTouchEvents。未來這項功能預計會擴充，讓您進一步瞭解使用者系統上的所有輸入裝置。歡迎針對用途提供意見。