未调用Polymer按键事件处理程序

ste*_*ong 3 javascript keypress polymer

无法弄清楚为什么在以下聚合物中我无法获得要调用的keypressHandler函数.我究竟做错了什么?(我尝试将on-keypress属性放在span元素本身上,但仍然没有雪茄.)其余功能按预期工作.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="psq-posscell" attributes="isposs nVal"  on-tap="{{toggle}}" on-keypress="{{keypressHandler}}" >
  <template>
    <link rel="stylesheet" href="../bower_components/polymer-flex-layout/polymer-flex-layout.css" />
    <link rel="stylesheet" href="psq.css" />
    <span class="flexbox align-center justify-center toggle" >{{isposs ? nVal : ' '}}</span>
    <style>
        .toggle {
            float:left; 
            border:1px solid white;
            text-align:center;  
            line-height:2;
            background-color:#f2f2f2;      
        }

        .toggle:hover {
            background-color:#0d2f5a;
            color:white; 
          }

    </style>

  </template>
  <script>
    Polymer('psq-posscell', {
      isposs: true,
      toggle: function() {
        this.isposs = !this.isposs;
        console.log("toggle called");
      },
      ispossChanged: function() {
        console.log("ispossChanged called");
      },
      keypressHandler: function(event, detail, sender) { 
        console.log("key pressed");
      },
    });
  </script>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)

Sco*_*les 6

当您按某个键时,系统必须知道该事件的发送位置.这就是为什么有一个概念focus.要使您的元素接收密钥,必须将其集中.

您可以通过设置使其成为焦点tabIndex,例如

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

现在,您可以通过调用focus()element(this.focus())上的方法,或通过选中它或单击它来使您的元素聚焦.

一旦你的元素聚焦,它应该接收按键.