vue-使用el-form表单时blur事件和button的点击事件冲突的解决方案

最新推荐文章于 2025-02-07 13:26:16 发布
最新推荐文章于 2025-02-07 13:26:16 发布
阅读量2.5k 收藏
点赞数
分类专栏： vue.js 前端首发 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ww_5211314/article/details/109614702
版权
前言

最近在项目中遇到一个场景，就是在校验输入框失焦(blur)事件后，第一次点击时按钮的点击事件失效，后来排查，发现原因，是因为第一次点击时先走了blur事件，然后再走点击事件，所以导致第一次点击按钮失效。

出现bug的原因

由于浏览器的默认事件，当你点击按钮时，页面中有文本框失焦时，会先触发文本框的blur事件，然后再触发click事件,所以导致了上述的bug。解决方案如下。

解决方案

pc端：使用mousedown事件来代替click事件
移动端：使用touchstart事件来代替click事件

Vue3、Element Plus使用v-for循环el-form表单进行校验
m0_67584973的博客
06-13 3119
在开发中遇到了这样一个需求有一个form是通过v-for生成出来的，并且数量不确定，每个表单中的字段都需要做校验，就将自己的解决方法记录了下来。
vue-form-craft，基于vue3的开箱即用表单方案
xinnian66aa的博客
02-28 2515
首先祝各位朋友们新年快乐！龙年大吉！在前端开发过程中，表单渲染是重要且繁琐的一环。为了提高开发效率并避免重复工作，我开发了一款基于vue3的表单工具，并取名vue-form-craft（vue表单工艺）。是适用于vue3项目中后台表单的一种通用解决方案。本文将介绍 vue-form-craft 的基本概念、使用方式及高级特性。主要由FormDesign（表单设计器）和SchemaForm（表单渲染器）组成。FormDesign通过拖拽快速生成JsonSchema，SchemaForm。
vue项目中blur和click事件冲突
qq_39085895的博客
02-04 3771
blur和click事件 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 因为JS是单线程，同一时间只能处理一个事件，且blur执行顺序优先click。 介于此我用了简单粗暴的方法，将click事件换成了mousedown事件 其实还有其他方法，这篇博文里讲述的比较详细些【解决blur与click冲突】 ...
keyup.enter 和 blur 事件冲突的问题
userkang的博客
09-18 5913
处理 keyup.enter 和 blur 事件冲突的问题 有些场景想要在 input 里输入文字，当触发回车或者失去焦点时保存数据 但是当按下回车时往往又会同时触发 blur 事件 所以就会触发两次保存操作，对此有个小技巧，就是让回车触发失去焦点事件。 直接看代码吧 <input v-model="newValue" type="text" @blur="saveValue" ...
element-plus组件库改造【2】 el-form表单点击label标签，触发表单控件响应
最新发布
github_74887499的博客
02-07 591
实现点击el-form-item上的label标签，表单控件不进行响应
解决Js先触发失去焦点事件再执行点击事件的问题
10-18
今天小编就为大家分享一篇解决Js先触发失去焦点事件再执行点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中失焦事件和点击事件冲突，如何解决？
一只琪琪子的博客
09-18 2437
①可以通过添加setTimeout来实现（但是有时候会出问题，会失效） //设备号失焦事件 blurInput(){ setTimeout(() => { this.isShowAuto = false },100) }, ②可以把点击事件修改成@mousedown鼠标按下事件（推荐这样解决） <div v-show="isShowAuto" class="auto"> <ul> .
form表单内子元素组件按钮button事件冲突 - Vue
survivorsfyh的博客
11-24 1720
Vant 组件在调用 form 的时候遇到了子组件按钮 button 嵌套导致表单提交的按钮事件与表单内子元素按钮组件事件冲突的情况; form表单的button按钮事件与子组件的按钮方法事件并不是相同方法,但是表单中子组件button的点击事件触发后会联代form提交表单的事件一并执行,一来二去的尝试发现了一些奥妙; 解决办法 仔细观察会发现表单中的 button 按钮会有一个 native-type="submit" 的属性; 表单中的子元素 button 组件虽然没有配置该属性,但默认也会享有该属
Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click
真爱一生的博客
01-12 844
input blur
输入框blur事件与click事件冲突问题
weixin_44646763的博客
07-06 1012
这个现象我在写项目的时候出现有几次了，但一般都没反应过来，以为是代码写错了而没触发方法。 例如下面，这是之前做的一个vue项目出现的问题： 打印的时候发现blur方法执行了，但列表的点击事件没有执行。 原因：其实这是事件间的执行优先级问题，blur的优先级比click高，所以blur事件先执行了且把列表隐藏了，列表就没有触发click事件咯 解决方法： 1、改用其他事件优先级可以比blur高的事件 2、使用setTimeout延时器 hiddenList(){ setTimeout(() =
【vue2+elemen-ui】el-form，el-table封装的条件过滤和列表展示的表格组件
工作的日常记录和平凡的生活分享
04-10 1345
然而，一旦项目的表格或表单多起来，每个不同的配置，以及多一个字段少一个字段，都要在 template 中重新写一大段组件代码，显得非常麻烦。或许你会考虑将这些代码封装起来，可是又会发现，封装的表格、表单大多数只在一处地方使用，还不如不封装呢。到底要如何封装，可以让每处使用 el-table 或 el-form， 都可以复用相同的组件，减少代码量的同时又具备高度的可定制性？本文章将会按照从无到有的步骤，按照封装组件常用的思路来封装 el-table，并且实现封装完成的组件支持 el-table 的全配置。
form表单中的onblur事件
12-08
onblur事件，鼠标离开表单input框时触发的事件
vue使用Element组件时v-for循环里的表单项验证方法
08-27
官方文档并没有明确的说法，我们需要通过查找解决方案和实际验证，总结出来解决方法。 解决方法是，我们需要在 v-for 循环中为每个表单项添加唯一的 key，然后在 rules 中使用这个 key 来指定验证规则。例如： ```...
vue el-form同时对多个表单进行验证 activated
周家大小姐
08-04 1462
看代码,因为我这是步骤条;可能和常规的有点不一样;大家根据需求改就可以 resetFields,clearValidate清空和重置为二选一,所以不能同时使用 <!-- * @Author: your name * @Date: 2021-08-03 15:25:06 * @LastEditTime: 2021-08-04 11:23:07 * @LastEditors: Please set LastEditors * @Description: In User Settings E.
click与blur的冲突
qq_36971710的博客
04-29 830
背景：输入框失去焦点要执行指定动作，输入框外面有提交按钮。 问题：当需要去点击输入框外面的按钮时，先执行了blur事件再执行click事件，但同时，blur事件比click事件结束得慢。那么问题来了，怎么严格限定click事件比blur事件先执行呢？ 解决方案核心： e.preventDefault()—该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作） 事件执行顺序...
input失去焦点事件和点击事件冲突的解决思路
weixin_43333600的博客
02-14 3425
input失去焦点事件和点击事件冲突，注意mouseleave 事件不支持冒泡 。 mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout
点击按钮，不执行input的blur方法
四月
01-27 4054
场景 vue点击按钮不触发输入框失去焦点事件 之前在代码运行中发现 在给input添加失去焦点事件后（blur)，点击返回按钮也触发了input失去焦点事件。 解决方法：使用event.preventDefault();
解决input的blur事件后button的click不执行的问题
mossbaoo的博客
11-09 3443
我当时场景是微信小程序，在input中输入内容后，再点提交按钮，评论窗口隐藏了，但是提交的事件没有触发。 这里的要求是：     1. input失去焦点时，需要评论窗口隐藏     2. 点击提交按钮后，既要提交，也要隐藏评论窗口 当时的代码是： &lt;div class="actionArea" v-if="isComment"&gt; &lt;input type="tex...
解决blur与click冲突
jiezaizone的博客
04-28 656
#背景 在开发下拉选择（picker）组件中遇到，点击输入框出现下拉列表，再点击下拉列表选项后下拉列表自动收缩，然而选项值并没有选到 #一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 注（往往也是出现问题的原因...
在Vue3中使用element-plus,如何进行el-form的表单验证
04-19
可以使用Vue3中内置的v-model以及element-plus中提供的el-form和el-form-item组件，设置相应的验证规则和提示信息即可。 示例代码如下： ```html <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; export default { name: 'FormValidation', setup() { const formData = ref({ username: '', password: '', }); const formRules = ref({ username: [{ required: true, message: '请输入用户名', trigger: 'blur', }], password: [{ required: true, message: '请输入密码', trigger: 'blur', }], }); const submitForm = () => { // 提交表单操作 const form = ref('form'); form.value.validate((valid) => { if (valid) { // 验证通过执行提交操作 ElMessage.success('提交成功'); } else { ElMessage.warning('请填写完整信息'); return false; } }); }; return { formData, formRules, submitForm, }; }, }; </script> ``` 在这个示例中，我们使用了ref来创建响应式对象formData和formRules，formData用于存放表单数据，formRules用于存放表单的验证规则。 el-form组件作为表单容器，通过ref="form"指定参考名称，然后通过:model绑定formData数据模型，用:rules绑定表单验证规则。 el-form-item组件作为表单元素的包裹容器，通过label属性指定标签文字，再使用prop属性命名表单元素的key，与表单验证规则对应。 验证规则定义可包括以下属性： - required：表示是否为必填字段 - message：表示验证不通过时的提示信息 - trigger：表示触发验证的事件，默认为blur 最后，在提交表单时，我们使用validate方法对表单进行验证，需要在回调函数中判断验证结果并作出相应操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值