Polymer 如何使iron-a11y键在整个页面上工作？

我的按键（右键和左键）仅在单击页面的某些部分时才会抛出事件。如何使我的铁钥匙在整个页面上都能工作

以下是我现在拥有的：

<template>
    <iron-a11y-keys keys="left right" on-keys-pressed="onRightKey"></iron-a11y-keys>
    <paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="{{drawerWidth}}">

    ...

    </paper-drawer-panel>
</template>

...

---

当我设置

target={{}

时，它的行为似乎与此相同。我不确定目标参数的作用，所以这可能是我的问题。如果可能的话，您可以对页面的“某些部分”做一点澄清吗？如果我点击了主内容区域之外的边框，我将不胜感激。我怀疑钥匙被其他区域卡住了，没有冒泡。然而，这并不是全部，因为我刚刚使用x-tag-trap第三方web组件使其工作。无论焦点在哪里，它都能捕捉到关键点。很有趣！而且，正如我从您的代码片段中了解到的，这都是自定义元素内部的内容，而不是自动绑定模板？正确。它位于自定义元素的内部。

target

需要更好的文档和示例，但听起来它正是您所需要的。它是一个

对象

属性，用作监听按键的目标元素。我不知道如何传递，比如说，

作为绑定属性，因此您可能必须在脚本中执行。我会看看我是否能用代码找到答案。这会在按向左或向右箭头键时调用

onRightKey

功能，对吗？如何防止这种情况发生？您可以使用

document.body

而不是

document.querySelector（'body'）

<template>
    <iron-a11y-keys id="a11y" keys="left right" on-keys-pressed="onRightKey"></iron-a11y-keys>
    <paper-drawer-panel id="drawerPanel" responsive-width="1024px" drawer-width="{{drawerWidth}}">

    ...

    </paper-drawer-panel>
</template>

ready: function() {
    this.$.a11y.target = document.querySelector('body');
}