背景：

最近有一个需求：搜索框，输入时显示关联词下拉列表，点击关联词时跳转到搜索页面，点击其他部分则关闭关联词下拉列表。接到需求后，第一反应就是用模糊做回缩操作，避开身体的监控，然后踏入坑内。下面的场景再现，一步步看到这个问题的解决方案(里面的演示将由vue实现)

有bug的版本演示

注意：我直接用控制台替换了上次的搜索跳转，但是没有执行

投掷问题

当我点击上面的关联词时，它的onSearch不能被执行

演示代码演示

模板lang=' html ' div : class='[base class '-wrap ']'输入类型=' text ' v-model=' search val ' : class='[base class '-input ']Ref=' demo-search-input '占位符=' search ' @ focus=' onfucs ' @ blur=' onblor ' @ key up . enter=' on search ' @ input=' get recommended list '/span 3360 class='[base class '-BTN ']' @单击=' onsearch ' 45466677 ']导出默认值{ data(){ return { base class : ' demo-search '，searchVal: ' '，isShowRecommend: false，recommended list :[]}，methods : { onfocus(){ this . is show recommended=true }，onbull(){ this . issshow recommended=false this . search val=' . recommended list=[]}，onSearch(val){ val=type of val==' string '？ Val:这个。如果此处需要(val){//跳转搜索，则搜索val。我们用console代替console . log(val)this . search val=' ' } else { this。$ refs ['demo-search-input']。焦点()}}。getrecommended list(){ if(this . search val){//这里，我们需要向后台发送一个获取关联词的请求。在这里，我们使用模拟数据匹配来显示settimeout(()={ constraeg=new regexp(this . search val)constrar=[]for(让I=0；i mockData.lengthI) {if (reg。测试(模拟数据[I])} {arr。推(模拟数据[I])}}这个。推荐列表=arr}，10)} } }/脚本，以上就是我们效果的代码。根据逻辑，我们将模糊事件绑定到输入，以控制清除搜索和关闭关联词的下拉列表，并将点击事件绑定到列表。我们的预期是，当点击列表时，控制台将执行，然后输入将失去焦点并将其放在一边，但事实是，它只执行模糊，但onSearch事件中的控制台不执行。

猜测原因并尝试

首先，第一反应肯定是事件的触发顺序，所以我想到了一个利器setTimeout来验证

Onblur () {settimeout (()={this。is showrecommend=false this。searchval=' ' this。推荐列表=[]}，500)}结果真的触发了，因为blur先执行了点击。但是当我们点击其他区域时，下拉窗口需要暂停一会儿，然后消失。这很奇怪，所以我们会继续想办法调整它。

分析：

现在确认是事件的优先级。模糊优先于点击，所以我们需要找到一种方法来取代点击。我们知道click事件是由mousedown事件和mouseup事件组成的，mousedown和mouseup触发器必须在同一像素上才能触发click事件。也就是鼠标点击：mousedown-mouseup-click，那么我们写一个演示，看看事件的执行顺序，method : { onclick(){ console . log(' click ')}。onmousedown(){ console . log(' mousedown ')}，onmouseup(){ console . log(' mouseup ')}，on bulr(){ console . log(' blur ')} }结果

最后，click被mousedown取代，问题得到了解决

Li : class='[基类'-list']' v-for='(项，索引)在推荐列表' : key=' index ' @ mouse down=' on search(项)' {{item}}/Li最终效果显示

好了，今天的踩坑填坑运动结束了，以上就是本文的全部内容。希望对大家的学习有帮助，多多支持。