html菜单栏用户点击完自动收缩,js 下拉菜单点击旁边收起实现(踩坑记)

背景：

最近在搞一个需求：搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控，随后就踩坑里了，下面情景再现，一步一步来看这个问题的解决(里面的demo等会用vue实现)

带有bug的版本演示图

备注：最后的搜索跳转我直接用console代替掉了，但是并没有执行

问题抛出

当我点击上面的联想词的时候它的onSearch并不能执行

demo代码展示

type="text"

v-model="searchVal"

:class="[baseClass + '-input']"

ref="demo-search-input"

placeholder="搜索"

@focus="onFoucs"

@blur="onBlur"

@keyup.enter="onSearch"

@input="getRecommendedList" />