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 和键盘焦点之间的交互。与其他元素类型不同，这似乎是浏览器普遍抵制的东西。

在这个片段中演示有点变化无常，因为它基本上是为 window 断言 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>

Vue中如何捕获canvas上的按键事件

How to capture key event on canvas in Vue

javascript

canvas

event-listener

vue.js