Как зафиксировать ключевое событие на холсте в Vue
Используя Vue 2.5, у меня есть canvas с прослушивателем ключевых событий:
<template>
<canvas v-on:keyup.esc = "abortThing"></canvas>
</template>
<script>
export default {
methods: {
abortThing() {
console.info('you hit escape!');
}
}
}
</script>
Проблема в том, что слушатель не отвечает, когда я нажимаю escape, независимо от того, щелкнул я уже на холсте или нет.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я некоторое время экспериментировал с этим и обнаружил, что браузеры по умолчанию не позволяют фокусировать холст. Однако любой другой активный элемент, такой как нажатая кнопка или активная форма, будет нормально реагировать на события нажатия клавиш.
Однако есть свойство tabindex, которое указывает, можно ли сфокусировать что-то и в каком порядке, если вы нажмете клавишу Tab (отсюда и название). Если мы установим для tabindex значение 0, то он будет сфокусирован по умолчанию. Мне не удалось найти документацию, объясняющую взаимодействие между холстом и фокусом клавиатуры. Просто кажется, что браузер обычно сопротивляется этому, в отличие от других типов элементов.
Это немного сложно продемонстрировать в этом фрагменте, потому что он в основном утверждает tabindex для окна. Возможно, вам придется нажать на синюю область, чтобы она работала здесь, прежде чем нажимать escape.
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.info(event);
}
}
}).$mount("#app");<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app"></div>