如何處理輸入聚合物，沒有藍色邊框選項卡焦點？

Question

編輯2：

按鍵事件的工作，在此jsbin：http://jsbin.com/foyile/1/。問題是，我需要關注的元素有關的標籤，與這兩件行代碼

ready: function() { 
    this.tabIndex = 0; 
    this.focus(); 
} 

的問題是這會導致繪製元件的周圍的藍色邊框，而我這樣做時，它得到醜陋在我的移動元素上，是否有辦法在頁面上全局捕獲關鍵事件，而不關注元素（或使父元素不可見並使對焦更自然的父元素）？

原始的問題

是否有處理用戶的輸入，主要是按鍵和滑動手勢，一個聚合物組分。我想創建一個遊戲，我需要通過向上，向下按鈕或滑動手勢來控制播放器。

是否有聚合物方式來處理輸入，或者我需要使用原生dom和javascript？

編輯：

根據這個答案Polymer keypress event handler not being called： this.tabIndex = 0必須設置，這個工作。

這是jsbin：http://jsbin.com/foyile/1/。

Answer 1

您可以創建自定義元素，並使用綁定就像從@PeteTNT的鏈接解釋。也有在聚合物特殊的觸摸支持見http://www.polymer-project.org/docs/polymer/touch.html

但沒有理由不使用必要的事件監聽器就像在一個聚合物應用querySelector('xxx').onSomeEvent.listen(...)或querySelector('xxx').on['some-event'].listen(...)自定義事件（您也可以使用document.on...或window.on...註冊事件。

聲明例如

<link rel="import" href="packages/polymer/polymer.html"> 
<polymer-element name="some-element"> 
    <template> 
    <button on-click="{{buttonClickHandler}}">press me</button> 
    </template> 
    <script type="application/dart" src="some_element.dart"> 
</polymer-element> 

​​

Answer 2

是的，Polymer使用on-event屬性來綁定用戶輸入的處理函數。

這是從說明如何處理鍵輸入developer guide一個例子：

<polymer-element name="g-cool" on-keypress="{{keypressHandler}}"> 
    <template> 
    <button on-click="{{buttonClick}}"></button> 
    </template> 
    <script> 
    Polymer({ 
     keypressHandler: function(event, detail, sender) { ...}, 
     buttonClick: function(event, detail, sender) { ... } 
    }); 
    </script> 
</polymer-element> 

Answer 3

官方Polymer.Gestures庫正是爲這個purpouse提出：

• 官方回購：https://github.com/Polymer/polymer-gestures
• 說明：http://www.polymer-project.org/docs/polymer/touch.html

不幸的是，它沒有飛鏢版本呢。

我已經在這對飛鏢bug跟蹤系統開了一個問題，如果你想加上星：

https://code.google.com/p/dart/issues/detail?id=21017