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...