輸入裝置功能

Paul Kinlan

Chrome 47 推出新功能，方便您瞭解使用者如何與您的網站互動：InputDeviceCapabilities！我們先回顧一下 瞭解這樣做的重要性

DOM 輸入事件是位於低階輸入事件上方的抽象化機制，與實體裝置輸入 (例如click 事件可透過滑鼠、觸控螢幕或鍵盤觸發。但還有一個問題，那就是您無法透過簡單的方法 取得發生事件的實體裝置詳細資料。

此外，基於相容性因素，特定類型的輸入可能會進一步產生「假」的 DOM 輸入事件。當使用者輕觸觸控螢幕 (例如手機) 時，就會發生這類假 DOM 事件。這個事件不僅會觸發觸控事件，也會基於相容性因素而觸發滑鼠事件。

因此，開發人員在支援滑鼠和觸控輸入時，就會發生問題。您無法知道 mousedown 事件是否確實代表滑鼠的新輸入內容，或只是先前處理的觸控啟動事件的相容性事件。

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

問題是：該使用哪些工具？

除了指標事件以外，現今許多開發人員會處理觸控層的互動邏輯，進而防止預設值是避免一開始就建立「假的」滑鼠事件。這項設計適用於許多情境，不必為了利用 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 的 Polyfill 系列影片，可供您在大多數的平台上使用。

目前這個 API 的最小限度在於解決辨識觸控事件衍生的滑鼠事件特定問題。您甚至可以例項化 InputDeviceCapabilities 的例項，但其中只包含 firesTouchEvents。我們預計日後會擴展，以便進一步瞭解使用者系統上的所有輸入裝置。歡迎您對用途提供意見。