input輸入 blur 和click 事件衝突

1. 問題描述

實現功能：當input 輸入框聚焦的時候，顯示清除按鈕； 失焦的時候隱藏清除按鈕；點擊清除按鈕的時候，清空輸入。

問題： 當點擊清除按鈕的時候，並無清空輸入，即意味着沒有觸發click事件， 這是爲何呢

相關代碼：

<input v-model="phone" @focus="focus"  @blur="blur"/>
    <div class="clear-icon" v-show="isClearPhoneShow" @click="clearFn">
        <img src="@/assets/img/inline-closepng" alt="" />
   </div>

//  清除輸入
    clearFn()    
        this.phone = ''      
    },
   // 聚焦 
    focus（) {      
        this.isClearPhoneShow = true
    }
  // 失焦
    blur() {   
        this.isClearPhoneShow = false
    }

2. 分析緣由

這是由於blur事件比click事件先觸發，而javascript爲單線程，同一時間只能執行處理一個事件，因此當blur處理程序時，致使其後續click事件並不會執行

3. 解決辦法

若是click事件比blur事件先觸發就沒有問題了，因此能夠給blur事件延遲觸發

// 失焦
blur() {   
  setTimeout(() => {
       that.isClearPhoneShow = false
  }, 100)   
}

4. 別的方案

在這篇文章有提供其餘的方法，可供參考 https://www.jianshu.com/p/ad8...