防止在 Vue.js 中单击输入触发按钮答案

【问题标题】：Prevent enter firing button click in Vue.js防止在 Vue.js 中单击输入触发按钮
【发布时间】：2017-11-19 18:37:19
【问题描述】：

我正在尝试解决用户界面问题，其中在输入字段中按下回车键实际上会触发按钮上的单击事件（可能是因为它现在具有焦点）。有问题的按钮在其点击操作上有一个防止修饰符（即<button @click.prevent="blah">），但这无济于事。我想要做的是确保按钮操作仅通过实际单击按钮执行，而不是通过在前面的输入字段中输入。

稍后：我现在使用 <a @click.prevent="blah"> 来代替，通过 Bootstrap 将链接样式设置为按钮。这没有问题 - Enter 键不会触发处理程序。在我看来，没有办法区分鼠标单击按钮和 Enter 键触发按钮之间的区别。两者都被视为 MouseEvent，我找不到区分两者的方法。

【问题讨论】：

在您的事件处理程序中，您是否尝试过e.preventDefault()？
这不是@click.prevent为我做的吗？

标签： vue.js

【解决方案1】：

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

【讨论】：

哇！我不敢相信这就是它。这已经让我死了这么久！非常感谢。我以前从未遇到过这种情况。

【解决方案2】：

最适合我的是空的@click.prevent="" 与@mousedown.prevent="myfunction" 的组合。

这个：

防止“Enter”键触发点击
使标签在点击时不接收焦点（键盘导航除外）
防止在任何href="#" 上重新加载页面

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

【讨论】：

【解决方案3】：

在类似的情况下，我通过删除 <form> 标签来修复它。由于 Vuex 正在处理表单提交，所以无论如何我都不需要表单标签。

【讨论】：