吐血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('验证失败')

　　　　　　}

终于解决啦，有其他方法欢迎留言交流啊

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/han77/p/10471938.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

0 条评论