阻止 form 表单 input 回车触发 button 按钮 click 事件

问题

<form @submit.prevent>
	<button @click="Action">点击事件但并不是提交表单</button>
	<input type="file" @input="uploadLogo" />
	<input type="text" name="name" autocomplete="off"/>
</form>

如上代码，在 input 输入框中按下回车键会自动触发 Action 事件，这就会影响业务流程，也算是个bug，但这是为什么呢？

原因

因为在 form 表单中 button 有三种类型（type=）submit、button、reset ，默认为 submit
当不加 type=“button” 的时候在input框回车，button就会被当做 submit 调用。

解决

方法1：给 button 加 type 类型

<button type="button" @click="Action">点击事件但并不是提交表单</button>

方法2：给 input 加阻止回车鼠标事件

<input type="text" name="name" autocomplete="off" @keydown.enter.prevent/>

选择哪种方法就看你的 form 表单中修改哪个更方便一点，
如果 button 少，那当然选择方法1，如果 input 少，选择方法2，根据自己的代码情况选择

相关链接

vue 阻止事件冒泡，捕获方法
阻止 form input 输入框按回车自动提交表单

我的个人博客有空来坐坐

https://www.wangyanan.online