Element plus中el-input框回车触发页面刷新问题以及解决办法

问题描述

在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面

问题原因

当el-form中只有一个el-input时，在输入框内回车就会触发表单提交的默认事件

解决方案

在el-form 上加上@submit.native.prevent 防止事件冒泡
(@submit.stop.prevent也可以达到该效果)

参考代码如下：

<el-form
  ref="formRef" 
  :model="state.form" 
  @submit.native.prevent
>
	<el-form-item label="请输入内容：">  
		<el-input v-model.trim="state.form.heShiBMID"></el-input>                 
	</el-form-item> 
</el-form>

相关补充

1.事件冒泡

• 事件冒泡（Event Bubbling）是事件处理的一种机制，它描述了事件从最具体的元素（如一个按钮或链接）开始，然后逐级向上转播至不那么具体的节点的过程。

• 在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了事件处理器来处理相同的事件，那么这个事件也会在这个父元素上触发。这个过程会一直持续到事件到达文档的根节点为止。例如，假设有一个包含多个子元素的div元素，每个子元素都有自己的点击事件处理器。当用户点击其中一个子元素时，不仅该子元素的事件处理器会被调用，而且其所有祖先元素（包括div元素）的事件处理器也会被调用，因为事件会“冒泡”到它们那里。

• 事件冒泡允许在较高的层次上处理事件，从而避免在每个元素上都设置事件处理器，这样可以减少代码的重复，并且使得事件处理更加模块化和可维护。在JavaScript中，可以使用event.stopPropagation()方法来阻止事件继续向上冒泡到父元素。

2.Vue中@事件名.stop、@事件名.prevent

• 以下事件名就使用 “click” 事件演示，可以是@keydown、@keyup、@click、@submit、@wheel、@select、@focus、@mouseout等等均可以

（1） @click.stop

<!-- 经典的冒泡问题：
	如下：	父元素中添加了一个click事件，
			其下面的子元素中也添加了click事件，
	此时，	点击子元素获取子元素的点击事件，
			但却触发的是父元素的事件：
--> 			
<view class="footer-box" @click="clickCard">
		<view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>		

<!-- 使用@click.stop：阻止事件冒泡方法来解决这个问题： -->
<view class="footer-box" @click="clickCard">
		<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

（2）@click.prevent

<!-- @click.prevent：阻止事件的默认行为，
	例如：	在代码里写入一个a标签，
			点击会跳转到目标链接网页中 -->
<view class="example-body">
	<a href="http://www.baidu.com">百度</a>
</view>
<!-- 	若不想让它跳转但还想使用a标签的话，
		此时就需要使用@click.prevent方法： -->
<view class="example-body">
	<a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
</view>

（3）@click.后面的属性连续使用：如同时要阻止冒泡和默认行为

<!-- 本例点击<a>标签时，
	如果既要阻止冒泡，又要阻止百度的跳转，
	<a>标签的点击事件可以这么写: @click.prevent.stop  先阻止默认行为再阻止冒泡
						  或者：@click.stop.prevent  先阻止冒泡再阻止默认行为
-->
<view class="footer-box" @click="clickCard">
	<a href="http://www.baidu.com" @click.prevent.stop='clickCard'>
		百度
	</a>
</view>
<!-- 如此就实现了只有<a>标签的click有效果，且不跳转到百度网页 -->

3.在Vue中阻止表单提交有几个方法，

• 使用.prevent修饰符，
• 使用@submit.native.prevent事件监听，
• 在方法中调用event.preventDefault()。

（1）使用.prevent修饰符

Vue提供了事件修饰符.prevent，可以直接在模板中使用，阻止表单的默认提交行为。
@submit.prevent：在submit事件上使用.prevent修饰符，阻止默认的表单提交行为。这种方法最简单，适合初学者和简单项目。

（2）使用@submit.native.prevent事件监听

在某些情况下，你可能会在组件上监听原生事件，可以使用.native修饰符配合.prevent来阻止默认行为。
@submit.native.prevent：在自定义组件上监听原生提交事件，并使用.prevent修饰符阻止默认行为。

（3）在方法中调用event.preventDefault()

如果需要更复杂的逻辑，可以在提交处理函数中手动调用event.preventDefault()来阻止表单提交。这种方法提供了更多的灵活性。
event.preventDefault()：手动调用此方法来阻止默认的表单提交行为。

<template>
  <form @submit="handleSubmit">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
  </form>
</template>
<script>
export default {
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // 阻止表单提交
      // 处理表单提交逻辑
      console.log('表单提交被阻止');
    }
  }
}
</script>

（4）三者方法比较