vue keydown甚至只在元素处于活动状态时触发

Question

在尝试侦听vuejs中的keydown事件时，我遇到了一个奇怪的问题。

我将一个keydown事件附加到一个包含整个可见区域的div标签上：

<template>
    <div class="layout-wrapper" @keydown="handleKeyDown"> // <--- our keydown event
        <div class="workspace">
            <animation-canvas class="animation-canvas"></animation-canvas>
            <control-panel class="control-panel"></control-panel>
        </div>
        <dock class="dock"></dock>
    </div>
</template>

当它们触发事件时，我使用一种方法来处理它，该方法记录到控制台，然后根据按下的键进行切换：

    handleKeyDown(event: KeyboardEvent) {
        console.log('down');
        switch (event.key) {
            case 'ArrowLeft':
                alert('left');
                break;
            case 'ArrowRight':
                alert('right');
                break;
        }

起初，我以为事件没有触发或侦听器没有正确连接，但后来我发现，只有当我在输入元素处于活动状态时按下keydown时，keydown侦听器才会触发。

​

​

这里我漏掉了什么？我已经有一段时间没有做前端工作了，但我非常确定他们的keydown事件不需要选择输入事件(对吗？)

Answer 1

我太专注于将所有逻辑都限定到组件元素的范围，以至于我没有想到在全局级别附加侦听器(感谢评论中的建议)。

我使用以下生命周期方法更新了我的组件：

 mounted() {
        document.addEventListener('keydown', this.handleKeyDown);
    },

    beforeDestroy() {
        document.removeEventListener('keydown', this.handleKeyDown);
    },

现在它到处触发所以我很好。谢谢你的帮助！