在处理输入框清除输入内容时，遇到了一个问题，当我们在输入框输入内容输入框获取到焦点时，输入框后面会出现一个图标删除已输入的内容，因此删除图标会绑定一个click事件，但是当我们点击图标的时候，也触发了input的blur事件，blur事件会让input失去焦点时隐藏删除的图标，并且blur事件先于图标的click事件执行，因此这时候点击图标并不会删除输入框已输入的内容，而是图标消失了，那么这个结果就不是我们想要的，那怎么解决这个问题呢？
我们先看下blur和click事件
blur事件：元素节点失去焦点后触发，该事件不会冒泡。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
问题产生的原因：
这是因为blur事件比click事件先触发，而javascript为单线程，同一时间只能执行处理一个事件，所以当blur执行时，导致其后续click事件并不会执行
解决方法一 ：给图标再添加一个mousedown事件，在其中执行event.preventDefault()阻止浏览器默认事件，这样点击按钮时输入框就不会失去焦点了
<span v-if="showClear" @click="clear" @mousedown.prevent>X</span>
解决方法二：动态绑定blur事件，当鼠标进入input框父级元素时，移除input绑定事件blur，当鼠标移出输入框父级元素时，给input绑定blur事件
handleBlur(event) {
if (this.hovering) return;
this.focused = false;
this.$emit('blur', event);
},
引用
