js 下拉菜单点击旁边收起实现(踩坑记)

网络编程 2021-07-04 15:01www.168986.cn编程入门

这篇文章主要介绍了js 下拉菜单点击旁边收起实现(踩坑记)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

背景

最近在搞一个需求搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦（blur）去做收起操作避免body的监控，随后就踩坑里了，狼蚁网站SEO优化情景再现，一步一步来看这个问题的解决（里面的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="getRemendedList" />
 <span :class="[baseClass + '-btn']" @click="onSearch"></span>
 <div :class="[baseClass + '-remended']" v-show="isShowRemend && remendList.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 remendList"
    :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: '',
   isShowRemend: false,
   remendList: []
  }
 },
 methods: {
  onFoucs () {
   this.isShowRemend = true
  },
  onBlur () {
   this.isShowRemend = false
   this.searchVal = ''
   this.remendList = []
  },
  onSearch (val) {
   val = typeof val === 'string' ? val : this.searchVal
   if (val) {
    // 这里需要跳转搜索，我们用console来代替
    console.log(val)
    this.searchVal = ''
   } else {
    this.$refs['demo-search-input'].focus()
   }
  },
  getRemendedList () {
   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.remendList = arr
    }, 10)
   }
  }
 }
}
</script>

上面就是我们这个效果的代码了，根据逻辑来看我们在input上面绑定了blur事件来控制清空搜索和收起联想词下拉列表，给list绑定了click事件，我们的预期是点击list的时候console执行然后input失去焦点收起来，事实是它仅仅执行了blur，onSearch事件里面的console并未执行。

猜测原因做尝试

第一反应绝对是事件的触发顺序，所以我就想到了利器setTimeout来验证

onBlur () {
 setTimeout(() => {
  this.isShowRemend = false
  this.searchVal = ''
  this.remendList = []
 }, 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 remendList"
 :key="index"
 @mousedown="onSearch(item)"
>{{item}}</li>

最终效果展示

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

上一篇：在vue中根据光标的显示与消失实现下拉列表下一篇：微信小程序行的删除和增加操作实现详解

js 下拉菜单点击旁边收起实现(踩坑记)

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

js 下拉菜单点击旁边收起实现(踩坑记)

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设