项目场景：

表单校验，包含多个输入框，需要对每个输入框进行失焦校验，校验不通过需要进行弹框提示用户。

问题描述

点击A输入框->再点击B输入框->触发A失焦弹窗->点击弹窗确认->触发B失焦弹窗->点击弹窗确认->触发B失焦弹窗->点击弹窗确认->触发B失焦弹窗…

原因分析：

A输入框满足失焦校验，点击B输入框，此时触发A输入框失焦校验弹出弹框，点击A弹窗又触发B失焦，B弹框校验，但此时B输入框并未正确失焦，只是因为点击了上层弹框导致短暂失焦，这样B失焦校验就会循环触发。

解决方案：

利用事件的relatedTarget属性判断
relatedTarget 事件属性返回与事件的目标节点相关的节点。
正常失焦事件该属性为null 但如果失焦的同时点击了其他按钮/输入框该属性为对应的按钮和输入框的节点

validateBlur(e) {// 避免input框blur事件循环调用if (e.relatedTarget && e.relatedTarget.className !== 'my-input') {return}/.. 校验逻辑 ../
}

多个输入框失焦事件触发异常问题解决相关推荐

失焦事件触发_js中表单的聚焦失焦事件
焦点事件: 不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,a标签.页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document. 例子结构如下: js操作如下: 1.f ...
失焦事件触发_jquery 触发/失去焦点事件例子详解
触发焦点: $("Element").focus() 触发每一个匹配元素获得焦点事件. $("Element").focus(function) 事件会在获得焦 ...
JS事件失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。...
失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...
input输入中文时，拼音在输入框内会触发input事件的问题
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需求:选词完成后触发input事件,只触发一次. 解决办法: 通过查 ...
javascript 模拟按键事件触发输入框oninput事件
记录下解决textarea 在js赋值后不生效的问题我要实现的是网页聊天框模拟输入一段话,然后js触发点击发送事件然而在使用js直接赋值之后,textarea并没有收到值 document.que ...
Vue+Element ui input输入框，扫码枪触发 enter事件，多次快速扫描会出现字符丢失的问题（已解决）
input输入框,扫码枪触发 enter事件,多次快速扫描第二次字符会丢失修改之前代码: 在接口返回过来值之后,将input框值清空掉这样写用键盘enter键快速触发多次,也不会有任何问题,但是 ...
【JQuery】两种失焦事件的使用
可以通过给jsp / html页面的input输入框绑定失去焦点事件,来判断用户是否已结束输入. 在JQuery框架中,blur()失焦事件 / change()内容改变事件都可以作为失焦事件来使用. ...
js blur失焦事件与click点击事件冲突
场景:输入框绑定blur失焦事件,focus后点击按钮,触发了输入框的blur事件,但是按钮点击事件没有触发. 原因:blur失焦事件的优先级比click点击事件高. 解决方法: 1.都触发 blur ...
python事件触发机制_Python3-事件驱动、IO模型和触发方式
事件驱动模型传统编程线性模型开始 ----> 代码块A ---->代码块B ---->代码块C ...... 结束每个代码块都有各自实现的功能,按照条件语句顺序判断执行,每一次 ...

多个输入框失焦事件触发异常问题解决

项目场景：

问题描述

原因分析：

解决方案：

多个输入框失焦事件触发异常问题解决相关推荐

最新文章

热门文章