防止在Vue.js中输入触发按钮

Question

我正在尝试解决用户界面问题，其中在输入字段中按下的回车键有效地触发按钮上的点击事件（可能是因为它现在具有焦点）。有问题的按钮在其点击操作上有一个防止修饰符（即import serial ; print (serial.__version__)），但这没有帮助。我想要做的是确保按钮操作仅通过实际点击按钮来执行，而不是通过输入前面的输入字段来执行。

稍后：我现在正在使用<button @click.prevent="blah">，而链接通过Bootstrap设置为按钮。这没有问题 - Enter键不会触发处理程序。对我来说似乎疯狂，没有办法区分鼠标点击按钮和Enter键触发它。两者都被视为MouseEvent，我无法区分这两者。

Answer 1

实际上，答案非常简单，但并不是很明显。我使用普通<button>。我忘了添加类型标签，我通常会这样做：<button type="button">一旦到位，Enter键就不再触发它。

Answer 2

在类似情况下，我通过摆脱<form>标签来解决了这个问题。由于Vuex正在处理表单提交，因此无论如何我都不需要表单标签。

Answer 3

最适合我的是将空@click.prevent=""与@mousedown.prevent="myfunction"结合使用。

此：

• 防止“ Enter”键触发点击
• 保留标签以使其不再关注点击（键盘导航除外）
• 防止在任何href="#"上重新加载页面

我的小提琴：https://jsfiddle.net/j8fchbvk/37/