首先解释一下时间冒泡
事件冒泡(Event Bubbling)是事件处理的一种机制,它描述了事件从最具体的元素(如一个按钮或链接)开始,然后逐级向上转播至不那么具体的节点的过程。
在事件冒泡过程中,当一个事件在一个元素上触发时,该事件会首先在这个元素上触发。如果这个元素的父元素也注册了事件处理器来处理相同的事件,那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。
例如,假设有一个包含多个子元素的div元素,每个子元素都有自己的点击事件处理器。当用户点击其中一个子元素时,不仅该子元素的事件处理器会被调用,而且其所有祖先元素(包括div元素)的事件处理器也会被调用,因为事件会“冒泡”到它们那里。
事件冒泡是一个非常有用的概念,因为它允许您在一个较高的层次上处理事件,而不是在每个可能的元素上都设置事件处理器。这样可以减少代码的重复,并且使得事件处理更加模块化和可维护。
然而,有时您可能希望阻止事件冒泡,以便只在特定的元素上处理事件。在JavaScript中,您可以使用event.stopPropagation()方法来实现这一点。这将阻止事件继续向上冒泡到父元素。
原因
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面
老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现
解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡
参考代码如下
<el-form
:model="ruleForm"
ref="ruleForm"
@submit.native.prevent
>
<el-form-item label="请输入内容:">
<el-input
v-model.trim="ruleForm.club_name"
>
</el-input>
</el-form-item>
</el-form>