首页 > 建站教程 > JS、jQ、TS >  input blur失去焦点事件和点击事件冲突正文

input blur失去焦点事件和点击事件冲突

我爱模板网在写一个自定义下拉框时,下拉框的显示隐藏由输入框的焦点获取和失去来决定,而下拉框的点击事件此时则无效了,代码如下:
<div class="select">
    <input type="text" v-model="projectName" @keyup="doSearch" :disabled="!!id" @focus="showOptions(true)" @blur="showOptions(false)">
    <div class="options" v-show="isShowOptions" ref="select">
        <div v-for="(item,index) in projectList" @click="onSelect(item)" :key="index" :value="item.id" class="row">
            {{item.title}}
        </div>
    </div>
</div>
这是因为JavaScript是单线程,同一时间只能执行处理一个事件。“blur优先于click执行”。而在上面的代码中,由于blur处理程序,会将对下拉框展示区隐藏,所以导致其后续click事件并不会执行。

根据原因可以有两种解决方案:

方案一、对blur事件进行延迟,让click先执行(mousedown > mouseup > click)
showOptions(flag){
    setTimeout(()=>{
        this.isShowOptions=flag
    },300)
},
方案二、将@click事件改成@mousedown事件,因为mousedown先于blur执行
@mousedown="onSelect(item)"
这两种方法都能解决问题,我爱模板网选择了第二种方案。