js 下拉菜单点击旁边收起实现(踩坑记)
2019-09-29 11:32
1626 查看
背景:
最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现)
带有bug的版本演示图
备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行
问题抛出
当我点击上面的联想词的时候它的onSearch并不能执行
demo代码展示
<template lang="html"> <div :class="[baseClass + '-wrap']"> <input type="text" v-model="searchVal" :class="[baseClass + '-input']" ref="demo-search-input" placeholder="搜索" @focus="onFoucs" @blur="onBlur" @keyup.enter="onSearch" @input="getRecommendedList" /> <span :class="[baseClass + '-btn']" @click="onSearch"></span> <div :class="[baseClass + '-recommended']" v-show="isShowRecommend && recommendList.length > 0"> <div :class="[baseClass + '-triangle-border', baseClass + '-tb-border']"></div> <div :class="[baseClass + '-triangle-border', baseClass + '-tb-bg']"></div> <ul :class="[baseClass + '-list-wrap']"> <li :class="[baseClass + '-list']" v-for="(item, index) in recommendList" :key="index" @click="onSearch(item)" >{{item}}</li> </ul> </div> </div> </template>
<script> const mockData = ['123456', '12', '56873', '092341', '454666677'] export default { data () { return { baseClass: 'demo-search', searchVal: '', isShowRecommend: false, recommendList: [] } }, methods: { onFoucs () { this.isShowRecommend = true }, onBlur () { this.isShowRecommend = false this.searchVal = '' this.recommendList = [] }, onSearch (val) { val = typeof val === 'string' ? val : this.searchVal if (val) { // 这里需要跳转搜索,我们用console来代替 console.log(val) this.searchVal = '' } else { this.$refs['demo-search-input'].focus() } }, getRecommendedList () { if (this.searchVal) { // 这里需要给后台发送请求来获取联想词,这里我们用mock数据匹配来展示 setTimeout(() => { const reg = new RegExp(this.searchVal) const arr = [] for (let i = 0; i < mockData.length; i++) { if (reg.test(mockData[i])) { arr.push(mockData[i]) } } this.recommendList = arr }, 10) } } } } </script>
上面就是我们这个效果的代码了,根据逻辑来看我们在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,完成了问题修复
<li :class="[baseClass + '-list']" v-for="(item, index) in recommendList" :key="index" @mousedown="onSearch(item)" >{{item}}</li>
最终效果展示
好了今天的踩坑和填坑运动结束,以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- js实现点击向下展开的下拉菜单效果代码
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- js实现点击向下展开的下拉菜单效果代码
- 下拉菜单点击实现连接跳转功能的js代码
- 下拉菜单点击实现连接跳转功能的js代码
- JS实现点击下拉菜单把选择的内容同步到input输入框内
- JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
- vue.js 实现点击展开收起动画效果
- JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
- jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
- js+css实现超简洁的二级下拉菜单效果代码
- 下拉菜单点击实现连接跳转的js代码
- JQ和JS实现点击后复制到剪切板
- 原生js模拟锚点,实现点击后,内容定位到本页的对应位置
- js点击弹出div层实现可拖曳的弹窗效果
- js控制某个div层中a标签的class属性,点击实现添加class属性,并且删除其他同级的class属性
- Js实现类容展开收起
- js实现表格变色点击行颜色改变
- js按钮点击展开收起
- js实现点击tab标签切换