聚合物元素的on-keypress不会触发

Question

我使用Declarative event mapping绑定了我的元素上的on-keypress事件，但是keypressHandler不会触发。我确实尝试了another question的答案，仍然是一样的。这是我的DOME，我的元素是gdg-slider.html，所有代码都在github上。

  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/core-icons/core-icons.html">
  <link href="bower_components/core-animated-pages/core-animated-pages.html" rel="import">
  <link href="bower_components/core-animated-pages/transitions/cross-fade.html" rel="import">
  <link href="bower_components/core-animated-pages/transitions/slide-from-right.html" rel="import">
  <link rel="import" href="bower_components/paper-shadow/paper-shadow.html">

  <link rel="import" href="bower_components/paper-fab/paper-fab.html">

<polymer-element name="gdg-slider" on-keypress="{{keypressHandler}}">
  <template>
  <style>
    core-animated-pages{
      position: absolute;
      top: 0px;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 32px;
      overflow: hidden;
      background-color: #222;
      color: #eee;
    }
    p,h1,h2,h3,h4,h5{
        padding: 5px;
        margin: 0;  
        word-break: break-all;
    }
    h1{
        padding: 10px;
    }
    section{
        width: 100%;
    }
    section > div {
      height: 100%;
      padding: 0 30px;
    }
    section.nav{
        position: absolute;
        bottom: 30px;
        left: 0;
    }
    section.nav>div{
        padding: 0 30px;
    }
    section.nav>div:first-child{
        padding-right: 0;
    }
    #preBtn{
        background: #999;
    }
    .me{
        border-radius: 500px;
    }
    code{
        color: #9f499b;
        padding: 0 5px;
    }
    div{
        padding: 5px;
    }
    a,a:active,a:visited,a:link{
        padding: 0 5px;
        color: #e7ad52 !important;
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
    .right{
        position: absolute;
        top: -90px;
        left: -90px;
        width: 170px;
        height: 170px;
        -webkit-transform: rotate(-45deg);
        font-size: 14px;
        background: #999;
        font-weight: bold;
        color: #fff;
    }
  </style>
    <core-animated-pages id="pages" transitions="slide-from-right" selected="{{pageIndex}}">
     <section style="overflow: hidden;">
      <p class="right" layout vertical center end-justified><span>Powered by Polymer</span><paper-shadow z="5"></paper-shadow></p>
      <div layout vertical center center-justified>
        <img src="resources/images/p-logo.svg"/>
        <h1>Polymer</h1>
        <p>Welcome To The World Of Tomorrow!</p>
      </div>
    </section>
    <section>
      <div layout vertical center-justified>

      </div>
    </section>
    //more sections...
  </core-animated-pages>
  <section class="nav" layout horizontal end-justified>
    <div layout horizontal><paper-fab start-justified icon="icons:arrow-back" id="preBtn" on-click="{{prePage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
    <div layout horizontal><paper-fab icon="icons:arrow-forward" id="nextBtn" on-click="{{nextPage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
  </section>
  </template>
  <script>
    Polymer('gdg-slider',{
        pageIndex: 0,
        pageMax: 0,
        ready: function(){
            this.pageMax = this.$.pages.children.length-1;
            this.$.pages.focus();
            this.pageIndex = parseInt(window.location.hash.replace('#','') || 0);
            this.toggleBtns();
        },
        keypressHandler: function(event, detail, sender){
            var code = event.keyCode;
            if(code==32 || code==39){
                this.nextPage();
            }else if(code==37){
                this.prePage();
            }
        },
        prePage: function(){
            this.pageIndex -= 1;
            if(this.pageIndex <= 0) {
                this.pageIndex = 0;
            }
            window.location.hash = this.pageIndex;
            this.toggleBtns();
        },
        nextPage: function() {
            this.pageIndex += 1;
            if(this.pageIndex >= this.pageMax) {
                this.pageIndex = this.pageMax;
            }
            window.location.hash = this.pageIndex;
            this.toggleBtns();
        },
        toggleBtns: function(){
            if(this.pageIndex >= this.pageMax) {
                this.$.nextBtn.hidden = true;
            }else{
                this.$.nextBtn.removeAttribute('hidden');
            }
            if(this.pageIndex <= 0) {
                this.$.preBtn.hidden = true;
            }else{
                this.$.preBtn.removeAttribute('hidden');
            }
        }
    });
  </script>
  </polymer-element>

Answer 1

您正在拨打this.$.pages.focus()，但您还没有#pages tabindex，所以它无法集中精力。这就是为什么你的keypress事件没有解雇的原因。

将tabindex="0"添加到#pages以修复此问题。

Here's a working jsbin.