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…