輸入裝置功能

Chrome 47 推出一項新功能,可協助您輕鬆瞭解使用者與網站的互動情形: InputDeviceCapabilities!我們先來談談為什麼這很重要

DOM 輸入事件是位於低層級輸入事件上方的抽象層,與實體裝置輸入內容 (例如click 事件可用滑鼠、觸控螢幕或鍵盤觸發)。不過,這有一個問題:沒有簡單的方法能夠取得負責事件的實體裝置詳細資料。

此外,基於相容性因素,某些類型的輸入內容可能會產生進一步的「假」 DOM 輸入事件。這種假 DOM 事件在使用者輕觸觸控螢幕 (例如手機) 時會發生,不僅會觸發觸控事件,還是因為相容性因素而觸發滑鼠事件。

這會導致開發人員支援滑鼠和觸控輸入。您無法得知 mousedown 事件實際上是否代表滑鼠的新輸入,或者只是相容性事件,但如果是先前處理的觸控啟動事件。

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

問題是:該在何處使用?

除了指標事件以外,許多開發人員現在也會處理觸控層的互動邏輯,避免系統一開始就建立「假」的滑鼠事件。這項設計在許多情境中都能順利運作,不需要變更即可使用 InputDeviceCapabilities。

但在某些情況下,您確實不想阻止系統預設觸控事件 例如仍會傳送「點擊」事件並變更焦點在這些情況下,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 已 Polyfilled,讓您在大多數平台上都可使用。

目前這個 API 的應用方式極低,主要著重於解決特定問題,也就是識別從觸控事件衍生的滑鼠事件。甚至能夠對 InputDeviceCapabilities 的執行個體執行個體化,但僅包含 firesTouchEvents。我們預期日後會擴展範圍,讓您能夠進一步瞭解使用者系統中的所有輸入裝置。我們想瞭解您對用途的意見,