问题描述:
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题。由于JS是单线线程,同一时间只能处理一个事件,并且blur的执行优先级高于click,所以当两者发生时,只执行了blur事件,而不会执行click事件。
一、blur和click事件简述
blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以。
click事件:当点击元素时触发click事件;所有元素都有此事件,会产生冒泡。
看了网上的解决方案,在这里总结一下:
1、用setTimeOut,让blur事件延迟,然后click先执行。
getBlur(){
setTimeout(()=>{
console.log("input失去焦点事件") //1S之后才会执行此事件
},1000)
}
2、将click事件改为mousedown,让其优先于blur事件执行
@click="getLocation(item)" 改为 @mousedown = "getLocation(item)"
3、如果你不需要单独对点击事件做一些逻辑处理的话,仅仅只需发生点击的效果,那么可以对其点击事件指向失去焦点。
<input type="text" ref="input" @blur="getBlur"/>
<div @mousedown="$refs.input.blur()" class="div-box">
选项a
</div>