如何在没有蓝色边框标签焦点的情况下使用聚合物处理输入? [英] How to Handle Input with Polymer, without blue border tab focus?

问题描述

编辑2 :

在此jsbin上有效的按键事件: http://jsbin.com/foyile/1/.问题是，我需要将选项卡放在元素上，并包含这两行代码

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

原始问题

是否有一个聚合物组件可以处理用户输入，主要是按键和滑动手势.我想创建一个游戏，并且需要通过向上，向下按钮或滑动手势来控制玩家.

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.

是否有一种高分子方法来处理输入，或者我需要使用本机dom和javascript?

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

编辑:

根据此答案聚合物按键事件处理程序未被调用 : 必须设置this.tabIndex = 0才能起作用.

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

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

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

推荐答案

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

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

但是没有理由不在Polymer应用程序中使用命令式事件侦听器(例如querySelector('xxx').onSomeEvent.listen(...))或在自定义事件中使用querySelector('xxx').on['some-event'].listen(...)(您也可以使用document.on...或window.on...来注册事件.

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.

说明性示例

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

这篇关于如何在没有蓝色边框标签焦点的情况下使用聚合物处理输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！