Ember组件键盘事件不会触发

时间:2017-01-20 01:49:55

标签: javascript ember.js

翻译指南https://guides.emberjs.com/v2.1.0/components/handling-events/。我尝试绑定组件的键事件的事件处理程序,但似乎它不起作用。当我按下一个键时,我看不到警报;但是,可以触发doubleClick事件处理程序。

我想要实现的是使用键 1 来选择第一个单选按钮。

更新

只有在单选按钮具有焦点时才能触发事件。

我的问题

有没有办法将键盘事件与make make特定控件绑定在一起?

代码

组件JS,

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['quiz-control'],

    keyUp(e) {
        alert(e.keyCode);
    },

    keyDown(e) {
        alert(e.keyCode);
    },

    keyPress(e) {
        alert(e.keyCode);
    }

});

组件HTML,

<input name="ans" type="radio" id="op0"/>
<label for="op0">1</label>

<input name="ans" type="radio" id="op1"/>
<label for="op1">2</label>

<input name="ans" type="radio" id="op2"/>
<label for="op2">3</label>

<input name="ans" type="radio" id="op3"/>
<label for="op3">4</label>

1 个答案:

答案 0 :(得分:1)

我绑定keypress中的document事件,

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['quiz-control'],

    didInsertElement() {
        this._super(...arguments);
        $(document).on('keypress', this._keypressHandler);
    },

    willDestroyElement() {
        this._super(...arguments);
        $(document).off('keypress', 'document', this._keypressHandler);
    },

    _keypressHandler(e) {
        console.log('quiz-control', e.keyCode);
    }
});