How to Handle Input with Polymer, without blue border tab focus?

问题

Edit 2:

Keypress events working, on this jsbin: http://jsbin.com/foyile/1/. The problem is, I need to focus the tab on the element, with these two pieces line of code

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

The problem is this causes to draw a blue border around the element, and it gets ugly when I do this on my moving element, Is there a way to capture the key event globally on the page without focusing on the element, (or a parent element that will make the border invisible and focusing more natural)?

Original Question

Is there a polymer component that handles user input, mainly key presses and swipe gestures. I want to create a game, and I need to control the player via up, down button or swipe gestures.

Is there a polymer way to handle input, or I need to use native dom and javascript?

Edit:

According to this answer Polymer keypress event handler not being called: this.tabIndex = 0 must be set, this to work.

Here's a jsbin: http://jsbin.com/foyile/1/.

回答1:

You can create a custom element and use bindings like explained in the link from @PeteTNT. There is also special touch-support in Polymer see http://www.polymer-project.org/docs/polymer/touch.html

But there is no reason not to use imperative event listeners like querySelector('xxx').onSomeEvent.listen(...) in a Polymer app or querySelector('xxx').on['some-event'].listen(...) for custom events (you can also use document.on... or window.on... to register events.

declarative example

<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();
  }
}

回答2:

Yes, Polymer uses on-event attributes to bind handler functions for user input.

This is an example from the developer guide that illustrates how to handle key input:

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