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

Question

編輯2 ：

在這個jsbin上工作的Keypress活動： http ：//jsbin.com/foyile/1/。 問題是，我需要將標簽集中在元素上，使用這兩行代碼

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

問題是這會導致在元素周圍繪制一個藍色邊框，當我在移動元素上執行此操作時會變得很難看，有沒有辦法在頁面上全局捕獲關鍵事件而不關注元素（或父元素）將使邊界不可見並且聚焦更自然的元素？

原始問題

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

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

編輯 ：

根據這個答案， 沒有調用Polymer this.tabIndex = 0 事件處理程序 ：必須設置this.tabIndex = 0 ，這才能工作。

這是一個jsbin： http ：//jsbin.com/foyile/1/。

Answer 1

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

這是開發人員指南中的一個示例，說明了如何處理鍵輸入：

<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 2

您可以創建自定義元素並使用綁定，如@PeteTNT中的鏈接所述。 Polymer中還有特殊的觸摸支持，請參閱http://www.polymer-project.org/docs/polymer/touch.html

但是沒有理由不在Polymer應用程序或querySelector('xxx').on['some-event'].listen(...)使用命令事件監聽器，如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>

import 'package:polymer/polymer.dart';
@CustomTag('some-element')
class SomeElement extends PolymerElement {

  SomeElement.created() : super.created() {}

  void buttonClickHandler(MouseEvent e) {
    doSomething();
  }
}

Answer 3

官方的Polymer.Gestures庫完全是為了這個purpouse：

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

不幸的是它還沒有Dart版本。

我在Dart bug Tracker上打開了一個關於此問題的問題，如果你想要明星吧：

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