本來今天想記錄一下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('驗證失敗')
}
}
終於解決啦 ，有其他方法歡迎留言交流啊
