Как заставить работать iron-a11y-keys на всей странице?

Мои нажатия клавиш (правая и левая клавиши) вызывают события только тогда, когда я щелкнул в определенных частях моей страницы. Как мне сделать так, чтобы мои железные ключи работали на всей странице?

Вот что у меня есть сейчас:

<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={{}}. Я не уверен, что делает целевой параметр, так что это может быть моей проблемой. Небольшое образование по этому поводу также приветствуется.


polymer polymer-1.0
person Larry Maccherone    schedule 04.06.2015    source источник
comment
Не могли бы вы добавить немного пояснений относительно того, что представляют собой «определенные части» страницы, если это возможно?   -  person Adaline Simonian    schedule 04.06.2015
comment
Только если я щелкну границы за пределами основной области содержимого. Я подозреваю, что ключи захвачены и не пузырятся другими областями. Однако это еще не все, потому что я только что заработал, используя сторонний веб-компонент x-tag-trap. Он может захватывать ключи независимо от того, где находится фокус.   -  person Larry Maccherone    schedule 04.06.2015
comment
Интересно! И, насколько я понимаю из вашего фрагмента, все это внутри пользовательского элемента, а не шаблона автоматической привязки?   -  person Adaline Simonian    schedule 04.06.2015
comment
Правильный. Он находится внутри пользовательского элемента.   -  person Larry Maccherone    schedule 04.06.2015
comment
target нуждается в лучшей документации и примерах, но, похоже, это то, что вам нужно. Это свойство Object предназначено для использования в качестве целевого элемента для прослушивания нажатий клавиш. Я не уверен, как передать, скажем, <body> в качестве атрибута привязки, поэтому вам, возможно, придется сделать это в сценарии. Я посмотрю, смогу ли я придумать ответ с кодом.   -  person Zikes    schedule 05.06.2015

Ответы (1)


arrow_upward
2
arrow_downward 

<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');
}
person Zikes    schedule 04.06.2015
comment
Это вызовет функцию onRightKey при нажатии клавиш со стрелкой влево или вправо, верно? Как мне предотвратить это? - person Lucca Mordente; 04.05.2016
comment
Вы можете использовать document.body вместо document.querySelector('body') - person jonS90; 26.08.2016