input blur事件与click事件冲突

今天在写一个输入框的联想搜索功能,像下面这样

为了让交互更流畅,做了一个处理,当输入框聚焦的时候,才出下面的联想列表,失焦的时候隐藏,点击列表的时候,列表项回填到输入框里面,方案很完美。但是有一个问题，点击列表的时候,也触发了input的blur事件,而且blur事件还先执行,由于javascript是单线程的,事件得按顺序执行,这样轮到click事件执行的时候,列表已经隐藏了,这样就无法点击了,内容也就无法回填了。

        两种解决办法

        1 用mousedown去替代click事件就ok了

     

2 如果由于某些原因，不方便用mousedown的话，可以延迟blur事件的执行

       

ps:截图里代码是用antd写的,但是事件处理是一样的