Как запечатлеть ключевое событие на холсте в Vue - PullRequest
Новая
       10

Как запечатлеть ключевое событие на холсте в Vue

0 голосов
/ 19 января 2019

Используя Vue 2.5, у меня есть canvas с ключевым слушателем событий: 

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

Проблема в том, что слушатель не отвечает, когда я нажимаю escape, независимо от того, имею ли яуже нажали на холст.

1 Ответ

0 голосов
/ 20 января 2019

Я экспериментировал с этим некоторое время и обнаружил, что браузеры не позволяют фокусироваться на холсте по умолчанию.Любой другой активный элемент, такой как нажатая кнопка или активная форма, будет отлично реагировать на события keyup.

Однако есть свойство с именем tabindex, которое указывает, может ли что-тобыть сосредоточенным и в каком порядке, если вы нажмете вкладку (отсюда и название).Если мы установим 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.log(event);
    }
  }
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
...