javascript - 如何在没有蓝色边框选项卡焦点的情况下使用 Polymer 处理输入？

Question

编辑 2:

在此 jsbin 上，按键事件有效:http://jsbin.com/foyile/1/ .问题是，我需要将标签集中在元素上，用这两行代码

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

问题是这会导致在元素周围绘制蓝​​色边框，当我在移动元素上这样做时它会变得很难看，有没有办法在页面上全局捕获键事件而不关注元素，(或使边框不可见且聚焦更自然的父元素)？

原始问题

是否有处理用户输入的 polymer 组件，主要是按键和滑动手势。我想创建一个游戏，我需要通过向上、向下按钮或滑动手势来控制玩家。

是否有聚合方式来处理输入，或者我需要使用原生 dom 和 javascript？

编辑:

根据这个答案Polymer keypress event handler not being called :this.tabIndex = 0 必须设置，才能工作。

这是一个 jsbin:http://jsbin.com/foyile/1/ .

Answer 1

您可以创建自定义元素并使用绑定(bind)，如@PeteTNT 的链接中所述。 Polymer 中也有特殊的触摸支持，请参阅 http://www.polymer-project.org/docs/polymer/touch.html

但是没有理由不在 Polymer 应用程序中使用命令式事件监听器，例如 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();
  }
}