下拉菜单点击旁边收起实现 • 踩坑记

背景：

最近在搞一个需求：搜索框，输入时显示联想词下拉列表，当点击联想词跳转到搜索页，如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦（blur）去做收起操作避免body的监控，随后就踩坑里了，下面情景再现，一步一步来看这个问题的解决（里面的demo等会用vue实现）

带有bug的版本演示图

search-bug (1).gif

备注：最后的搜索跳转我直接用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。但是当我们点击其他区域的时候下拉窗口需要停顿一会再消失，这个很诡异，所以继续想办法调整。

分析：

1. 现在确认是事件的优先级的问题了，blur要优先于click所以我们需要想办法替换掉click
2. 我们知道click事件是由mousedown事件和mouseup事件组成，同时mousedown和mouseup触发必须在同一个像素点上才会触发click事件。即鼠标点击： mousedown -> mouseup -> click
3. 所以我们来写一个demo看一下事件的执行顺序

methods: {
    onClick () {
      console.log('click')
    },
    onMousedown () {
      console.log('mousedown')
    },
    onMouseup () {
      console.log('mouseup')
    },
    onBlur () {
      console.log('blur')
    }
}

结果

event.png

4. 最后把click替换成mousedown，完成了问题修复

<li
  :class="[baseClass + '-list']"
  v-for="(item, index) in recommendList"
  :key="index"
  @mousedown="onSearch(item)"
>{{item}}</li>

最终效果展示

search (1).gif

好了今天的踩坑和填坑运动结束，欢迎指正和拍砖