吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug。。。
bug描述:
elementUi + Vue 技术
需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后需要一个弹框给出提示信息。
触发:在点击一个input框后接着点击另一个input框,使第一个input框的失去焦点为第二个input框的获得焦点,触发alert,无论点击确定还是X都会再次弹出blur事件中的alert
问题分析:
第一个input框在失去焦点时触发了blur事件,使得alert弹出,同时第二个input获得焦点,在点击alert确定或者X时使得第二个input框暂时失去焦点而再次触发blur事件,再点击再触发,从而形成死循环。
那么怎么区分两种情况的失去焦点事件呢?这里用到了e(event)(试了很多方法实现的,不一定是最好,到一定有用)
在vue给input框注册事件时传参:
<el-input @blur=inBlur($event)></el-input>
这样在事件中就拿到了e
这时就可以用e.relatedTarget来判断是否触发alert了:
inBlur(e) {
if(!e.relatedTarget || e.relatedTarget.className == ' el-input_inner ') {
this.$alert('验证失败')
}
}
终于解决啦 ,有其他方法欢迎留言交流啊
吐血bug-- 多个input框接连blur事件导致alert接连弹出的更多相关文章
- 事件和方法的区别,以input框的blur事件为例
1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调 三者是不相同的 事件:指的是一个 ...
- 点击input框,不让手机软键盘弹出的办法
设置readonly="" <input type="text" readonly="" placeholder="请输入邮 ...
- 经验总结:WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
- form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...
- 纯手画WinForm的Alert提示弹出框
纯手画WinForm的Alert弹框 一.窗体设置 设置以下属性: 属性名 属性值 说明 AutoScaleMode None 确定屏幕分辨率或字体更改时窗体如何缩放 BackColor 103, 1 ...
- input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法
在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
随机推荐
- ConstraintLayoutDemo【约束性布局知识梳理】【基于1.1.3】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在较新版本的Android Studio中新建项目默认使用 ConstraintLayout进行布局的. ConstraintLay ...
- [翻译 EF Core in Action 1.8] MyFirstEfCoreApp应用程序设置
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- Java多线程与并发面试题
1,什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...
- Spring中的@conditional注解
今天主要从以下几方面来介绍一下@Conditional注解 @Conditional注解是什么 @Conditional注解怎么使用 1,@Conditional注解是什么 @Conditional注 ...
- 基于Servlet+jsp的web计算器
基于Servlet+jsp的web计算器 这次老大为了让我们自己复习web中页面的跳转给布置得任务 天下代码一大抄,关键看你怎么抄 首先我想到的计算算法不是什么堆栈,是简单的(其实很复杂,但是我就只需 ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- kodi18.1设置中文的方法
默认情况下,新安装好的 Kodi 启动后是英文版的界面.但事实上,Kodi 包含多国语言 (包含简繁体中文版),我们可以设置改回简体中文界面.不过,很多人都遇到修改 Kodi 的语言为中文之后整个界面 ...
- Spring Bean 生命周期测试
本文代码GitHub地址 Bean的生命周期是开始创建到销毁的过程.需要实现相关的类BeanNameAware ,DisposableBean, InitializingBean ,并注册Inst ...
- Java数据结构和算法 - 高级排序
希尔排序 Q: 什么是希尔排序? A: 希尔排序因计算机科学家Donald L.Shell而得名,他在1959年发现了希尔排序算法. A: 希尔排序基于插入排序,但是增加了一个新的特性,大大地提高了插 ...
- Kubernetes 笔记 10 Job 机器人加工厂
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...