如何在 Ember js 3.13 中正确处理按键事件

Question

我是 Ember 的新手，我想捕捉全局按键事件并在我的组件中处理它。

经过大量网络爬取后，我使用全局 window.onkeydown = this.handleKeyPress 以老式方式完成了它，并且在 handleKeyPress 函数中我做了一些代码并调用了 this.movePlayerInDirection 但现在我的 'this' 是window.

onKeyPress(e, comp) {
    let keyCode = e.keyCode;`

    if (keyCode === KEY_LEFT ||
        keyCode === KEY_UP ||
        keyCode === KEY_RIGHT ||
        keyCode === KEY_DOWN) {
        let direction;

        switch(e.keyCode) {
            case KEY_LEFT:
                direction = {x: -1, y: 0}
                break;
            case KEY_RIGHT:
                direction = {x: 1, y: 0}
                break;
            case KEY_UP:
                direction = {x: 0, y: -1}
                break;
            case KEY_DOWN:
                direction = {x: 0, y: 1}
                break;
        }
        this.movePlayerInDirection(direction);
    }
}

这是赶上这个活动的最佳方式吗？（ember 方式）
如何从 window 范围访问组件功能？

更新：

根据下面的答案，我刚刚添加了 window.onkeydown = this.onKeyPress.bind(this) 并且有效

Answer 1

没有特殊的ember方法可以做到这一点。但是有像 ember-keyboard-shortcuts.

这样的插件

但是通常使用 window.addEventListener 并不是一个坏主意。但是你需要做两件事：

当组件被销毁时清理监听器
将事件绑定到函数上下文

对于经典组件，它可能如下所示：

Component.extend({
  init() {
    this.boundOnKeyPress = this.onKeyPress.bind(this);
  },
  didInsertElement() {
    window.addEventListener('keypress', this.boundOnKeyPress);
  },
  willDestroy() {
    window.removeEventListener('keypress', this.boundOnKeyPress);
  },
  onKeyPress() {
    ...
  }
})

Answer 2

我更喜欢使用 ember-keyboard 插件来完成这项工作。这对它在下面 link 中提供的功能有很好的解释， https://github.com/briarsweetbriar/ember-keyboard

首先你需要将 mixin 添加到你的组件中，

import Ember from 'ember';
import { EKMixin } from 'ember-keyboard';

export default Ember.Component.extend(EKMixin, {
  . . . .
});

然后需要设置keyboardActivated 属性为真。以下代码将在 init 方法之后调用。

activateKeyboard: Ember.on('init', function() {
    this.set('keyboardActivated', true);
  })

您应导入所需的事件

import { keyPress } from 'ember-keyboard';

onKeyPressHandler: Ember.on(keyPress('Escape'), function() {
        // console.log('escape button pressed');        
    }),

在您的情况下，如果您希望每次按键都触发一个事件，那么只需不要向 keyUp 或 keyDown 提供键串即可。这可能是触发大范围按键事件的便捷方式，例如在任何字母数字按键上。例如：

import { getCode } from 'ember-keyboard';

triggerOnAlphaNumeric: Ember.on(keyUp(), function(event) {
  if (/^Key\w(?!.)/.test(getCode(event))) {
    ...
  }
})

Answer 3

我们编写 ember-key-manager 是因为它提供了比任何其他按键事件插件更简洁的界面。具体来说，它提供了一项服务，因此您可以将它注入到任何地方，而不会卡在使用 mixins（现在已弃用）。

如何在 Ember js 3.13 中正确处理按键事件

How to handle keypress event properly in Ember js 3.13

javascript

ember.js