这篇文章主要介绍了js 下拉菜单点击旁边收起实现(踩坑记),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
背景:
最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现)
带有bug的版本演示图
备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行
问题抛出
当我点击上面的联想词的时候它的onSearch并不能执行
demo代码展示
- {{item}}
上面就是我们这个效果的代码了,根据逻辑来看我们在input上面绑定了blur事件来控制清空搜索和收起联想词下拉列表,同时给list绑定了click事件,我们的预期是点击list的时候console执行然后input失去焦点收起来,但是事实是它仅仅执行了blur,onSearch事件里面的console并未执行。
猜测原因做尝试
首先第一反应绝对是事件的触发顺序,所以我就想到了利器setTimeout来验证
onBlur () { setTimeout(() => { this.isShowRecommend = false this.searchVal = '' this.recommendList = [] }, 500) }
结果果然触发了,因为延迟了blur先执行了click。但是当我们点击其他区域的时候下拉窗口需要停顿一会再消失,这个很诡异,所以继续想办法调整。
分析:
- 现在确认是事件的优先级的问题了,blur要优先于click所以我们需要想办法替换掉click
- 我们知道click事件是由mousedown事件和mouseup事件组成,同时mousedown和mouseup触发必须在同一个像素点上才会触发click事件。即鼠标点击: mousedown -> mouseup -> click
- 所以我们来写一个demo看一下事件的执行顺序
methods: { onClick () { console.log('click') }, onMousedown () { console.log('mousedown') }, onMouseup () { console.log('mouseup') }, onBlur () { console.log('blur') } }
结果
最后把click替换成mousedown,完成了问题修复
最终效果展示
好了今天的踩坑和填坑运动结束,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。
以上就是js 下拉菜单点击旁边收起实现(踩坑记)的详细内容,更多请关注0133技术站其它相关文章!