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>

问题是，无论我是否已经在画布上单击，当我按下转义键时，听众都没有响应。

Answer 1

我对此进行了一段时间的试验，发现浏览器默认情况下不允许画布聚焦。不过，任何其他活动的元素（例如单击的按钮或活动的表单）都可以很好地响应键入事件。

但是，有一个名为tabindex的属性，该属性指示如果按Tab键，则是否可以聚焦某物以及以什么顺序聚焦（因此命名）。如果我们将tabindex设置为0，则默认情况下为焦点。我找不到文档来说明画布和键盘焦点之间的相互作用。与其他元素类型不同，它似乎只是浏览器通常会抵抗的东西。

在此代码段中进行演示有点变幻无常，因为它基本上是在声明窗口的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中的画布上捕获关键事件

1 个答案: