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>

在第一个按钮上，关键是“攻击”，在这种情况下，键入事件从开始就可以正常工作。不幸的是'Special Attack'和'Heal'并没有，但是...当我单击这两个keyup事件中的任何一个时，似乎都改变了，现在'Attack'不能与未单击的按钮'Heal'一起工作。但是“特殊攻击”的效果很好，直到我单击“攻击”或“治疗”为止。键入事件已更改为触发最后单击的按钮，并且可以正确识别键入。

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

Answer 1

在JavaScript中，事件始终起源于元素，并通过其父元素向上冒泡。键入事件来自当前关注的元素。

您的事件侦听器仅在定义侦听器的按钮为焦点时捕获keyup事件。

要解决此问题，您可以尝试监听包含按钮的元素上的按键事件，例如section元素。

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

Vue 2.0多重按键锁定

1 个答案: