js 下拉菜单点击旁边收起实现(踩坑记)
网络编程 发布日期：2025/11/6 浏览次数：1
正在浏览：js 下拉菜单点击旁边收起实现(踩坑记)
背景：
最近在搞一个需求：搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦（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' "htmlcode">
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>
最终效果展示
好了今天的踩坑和填坑运动结束，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。