<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)"这两种方法都能解决问题,我爱模板网选择了第二种方案。