Question

编辑2 ：

Keypress事件在这个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

是的，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 2

您可以创建自定义元素并使用@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();
  }
}

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

如何使用聚合物处理输入，没有蓝色边框选项卡焦点？

3 个答案: