吐血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('驗證失敗')

      }

    }

終於解決啦 ,有其他方法歡迎留言交流啊


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM