当按下一个按钮时，我如何模拟另一个按钮的按下？

Question

使用vue.js是否可以在按下一个按钮时模拟另一个按钮的按下？

例如，如果我按下↓ （向下箭头）按钮，我希望它被表示为我按下了TAB按钮。

为什么要实现这个功能的解释：

在单击DropDown列表后，所有元素的列表将打开。在此列表中，我有一个<input>元素作为搜索框，用于搜索列表中的其他元素（所有其他元素都直接列在该搜索框下面）。当前，当DropDown列表打开时，焦点会自动设置为搜索框。要向下移动到下一个项目，您必须按TAB按钮。但我需要使用↓（向下箭头）按钮来实现这一点。

- juniorjunior

---

你是在谈论按键事件吗？能否更详细地描述一下你的问题？ - Roy J

我已经编辑了我的问题。 - juniorjunior

Answer 1

我认为您想知道如何模拟按下“DOWN”键后模拟“TAB”键，以便将焦点移动到下一个可聚焦输入框。不必重新编写“key”事件，您可以调用下一个兄弟元素的HTMLElement#focus() 方法。

<!-- TEMPLATE -->
<input type="text"
    @keydown.up.stop.prevent="prevInput"
    @keydown.down.stop.prevent="nextInput"
    v-for="i in 5">

// SCRIPT
methods: {
  nextInput(e) {
    const next = e.currentTarget.nextElementSibling;
    if (next) {
      next.focus();
    }
  },
  prevInput(e) {
    const prev = e.currentTarget.previousElementSibling;
    if (prev) {
      prev.focus();
    }
  },
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <input type="text"
         @keydown.up.stop.prevent="prevInput"
         @keydown.down.stop.prevent="nextInput"
         v-for="i in 5">
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    nextInput(e) {
      const next = e.currentTarget.nextElementSibling;
      if (next) {
        next.focus();
      }
    },
    prevInput(e) {
      const prev = e.currentTarget.previousElementSibling;
      if (prev) {
        prev.focus();
      }
    },
  }
})
</script>

- tony19

---

兄弟，你应该穿上带有字母“H”的斗篷和衬衫，因为你是我的英雄！感谢你的答案，它非常有效，我以前从未听说过这些方法。将来我可以用它们做很多事情。 - juniorjunior

Answer 2

当然，将一个引用添加到tab。

<div class="tab" ref="tab">

然后捕获箭头点击：

arrowClick() {
   this.$refs.tab.click()
}

- Ohgodwhy

---

使用此语法出现错误 Uncaught TypeError: this.$refs.tab.click is not a function。 - juniorjunior

这是因为你不会以这种方式触发点击事件，除非你使用jQuery。然后$(this.$refs.tab).click()就可以了。否则，你需要创建和分派一个事件。 - Roy J

那么没有一种简单的方法来完成我在问题中提出的要求吗？v-on:keyup.up="doSomething"这个怎么样？然后实现该函数以执行我所需的操作呢？ - juniorjunior