Vue 2.0 按钮上的多个 keyup

Question

我对 Vue 有疑问，我有一个代码运行很好的@click，但我也想添加键盘处理程序。这是代码：

<section v-else class="row controls">
        <div class="small-12 columns">
          <button @click="playerAttack" @keyup.a="playerAttack" id="attack">
            ATTACK
          </button>
          <button @click="specialAttack" @keyup.s="specialAttack" id="special-attack">
            SPECIAL ATTACK <br />
            <span>Cooldown : {{ this.specialCooldown }}</span>
          </button>
          <button @click="playerHealing" @keyup.h="playerHealing" id="heal">
            HEAL <br />
            <span>Cooldown : {{ this.healingCooldown }}</span>
          </button>
          <button id="give-up">GIVE UP</button>
        </div>

重点是，在第一个按钮上，'Attack' 在这种情况下，keyup 事件从一开始就可以正常工作。不幸的是 'Special Attack' 和 'Heal' 没有，但是......当我点击这两个 keyup 事件中的任何一个时似乎发生了变化，现在 'Attack' 无法使用未点击的按钮'Heal'f.e。但是 'Special Attack' 工作正常，直到我点击 'Attack' 或 'Heal'。 keyup 事件正在更改为触发最后单击的按钮，并且 keyup 被正确识别。

我不认为这是方法问题，因为在调用最后单击按钮 keyup 事件时，@click 和 @keyup 一切正常。是代码有问题还是我不了解 Vue 的一些细节？

Answer 1

在 JavaScript 中，事件总是起源于一个元素并向上冒泡通过它们的父元素。 Keyup 事件源自当前获得焦点的元素。

如果定义侦听器的按钮获得焦点，您的事件侦听器只会捕获 keyup 事件。

要解决此问题，您可以尝试在包含按钮的元素上侦听 keyup 事件，例如节元素。

<section v-else class="row controls"
         @keyup.a="playerAttack"
         @keyup.s="specialAttack"
         @keyup.h="playerHealing">

Vue 2.0 按钮上的多个 keyup

Vue 2.0 multiple keyup on button

methods

keyup

vuejs2