我爱模板网在写一个自定义下拉框时,下拉框的显示隐藏由输入框的焦点获取和失去来决定,而下拉框的点击事件此时则无效了,代码如下:
2 | < input type = "text" v-model = "projectName" @ keyup = "doSearch" :disabled = "!!id" @ focus = "showOptions(true)" @ blur = "showOptions(false)" > |
3 | < div class = "options" v-show = "isShowOptions" ref = "select" > |
4 | < div v-for = "(item,index) in projectList" @ click = "onSelect(item)" :key = "index" :value = "item.id" class = "row" > |
这是因为JavaScript是单线程,同一时间只能执行处理一个事件。“blur优先于click执行”。而在上面的代码中,由于blur处理程序,会将对下拉框展示区隐藏,所以导致其后续click事件并不会执行。
根据原因可以有两种解决方案:
方案一、对blur事件进行延迟,让click先执行(mousedown > mouseup > click)
3 | this .isShowOptions=flag |
方案二、将@click事件改成@mousedown事件,因为mousedown先于blur执行
1 | @mousedown= "onSelect(item)" |
这两种方法都能解决问题,我爱模板网选择了第二种方案。