欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

吐血bug-- 多个input框接连blur事件导致alert接连弹出

程序员文章站 2022-05-25 19:37:45
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug。。。 bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后需要一个弹框给出提示信息。 触发:在点击一个input框后接着点击另一个input框,使第一个inp ......

本来今天想记录一下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('验证失败')

      }

    }

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