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)"

这两种方法都能解决问题，我爱模板网选择了第二种方案。