javascript - 如何在Vue中捕获 Canvas 上的关键事件

Question

使用 Vue 2.5，我有一个带有按键事件监听器的 canvas:

<template>
    <canvas v-on:keyup.esc="abortThing"></canvas>
</template>
<script>
export default {
    methods: {
        abortThing() {
            console.log('you hit escape!');
        }
    }
}
</script>

问题是，当我按下转义键时，监听器没有响应，无论我是否已经单击了 Canvas 。

Answer 1

我对此进行了一段时间的实验，发现浏览器默认不允许 Canvas 聚焦。不过，任何其他处于事件状态的元素(例如单击的按钮或事件表单)都可以很好地响应按键事件。

但是，有一个名为 tabindex 的属性指示是否可以聚焦某些内容以及按 Tab 键时的聚焦顺序(因此得名)。如果我们将 tabindex 设置为 0，则默认情况下它会获得焦点。我无法找到文档来解释 Canvas 和键盘焦点之间的交互。与其他元素类型不同，这似乎是浏览器普遍抵制的东西。

在这段代码中演示有点反复无常，因为它基本上是在断言窗口的 tabindex 。在点击退出之前，您可能需要单击蓝色区域才能使其在此处工作。

Vue.config.productionTip = false;
new Vue({
  template: `<div>
    <canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
  methods: {
    abortThing(event) {
      console.log(event);
    }
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>