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…