blur优先级高于click导致下拉框无法选择

1 开发场景

以自定义下拉框功能为例，功能点如下

• 点击输入框时弹出一个下拉框列表，显示搜索出来的建议输入内容
• 点击列表中的选项，可以将内容添加到输入框中
• 输入框内容更改后或者输入框失去焦点时因此下拉框

2 代码简述

根据功能需求，我们需要做以下操作

• 定义一个input标签和ul列表
• ul列表初始不可见，可见条件为input聚焦，也就是focus事件触发时
• input失去焦点时ul隐藏，也就是blur事件触发时
• ul列表的选项中绑定click点击事件，点击选项后更改input的值

3 问题描述

问题现象：点击选项时下拉框隐藏，input值没有修改

根因分析：在点击选项时，input的blur事件优先于ul的click事件，因此在click回调触发前ul的dom已经不存在了

4 解决思路

• 延后blur回调的触发
• 提前click回调的触发

5 代码实现

• 在blur的回调中使用setTimeout，将逻辑延迟一定的时间即可解决
• 将click的回调函数绑定在mousedown事件上，即可优先blur事件触发（推荐）