按钮上的 Vue 2.0 多键答案

【问题标题】：Vue 2.0 multiple keyup on button按钮上的 Vue 2.0 多键
【发布时间】：2024-05-02 18:30:02
【问题描述】：

我对 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>

关键是，在第一个按钮上，“攻击”在这种情况下，keyup 事件从一开始就可以正常工作。不幸的是，“特殊攻击”和“治疗”没有，但是......当我点击这两个按键事件中的任何一个时，似乎发生了变化，现在“攻击”不适用于未点击的“治疗”按钮。但“特殊攻击”工作正常，直到我点击“攻击”或“治疗”。 keyup 事件正在更改为触发最后单击的按钮，并且 keyup 被正确识别。

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

【问题讨论】：

标签： methods vuejs2 keyup

【解决方案1】：

在 JavaScript 中，事件总是源自一个元素，并通过其父元素向上冒泡。 Keyup 事件源自当前聚焦的元素。

只有当定义了监听器的按钮获得焦点时，您的事件监听器才会捕获 keyup 事件。

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

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

【讨论】：