js如何實(shí)現(xiàn)下拉菜單點(diǎn)擊旁邊收起效果

這篇文章主要為大家展示了“js如何實(shí)現(xiàn)下拉菜單點(diǎn)擊旁邊收起效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js如何實(shí)現(xiàn)下拉菜單點(diǎn)擊旁邊收起效果”這篇文章吧。

演示圖

備注：最后的搜索跳轉(zhuǎn)我直接用console代替掉了，但是并沒有執(zhí)行

問題拋出

當(dāng)我點(diǎn)擊上面的聯(lián)想詞的時(shí)候它的onSearch并不能執(zhí)行

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) {
    // 這里需要跳轉(zhuǎn)搜索，我們用console來代替
    console.log(val)
    this.searchVal = ''
   } else {
    this.$refs['demo-search-input'].focus()
   }
  },
  getRecommendedList () {
   if (this.searchVal) {
    // 這里需要給后臺(tái)發(fā)送請(qǐng)求來獲取聯(lián)想詞，這里我們用mock數(shù)據(jù)匹配來展示
    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>

上面就是我們這個(gè)效果的代碼了，根據(jù)邏輯來看我們?cè)趇nput上面綁定了blur事件來控制清空搜索和收起聯(lián)想詞下拉列表，同時(shí)給list綁定了click事件，我們的預(yù)期是點(diǎn)擊list的時(shí)候console執(zhí)行然后input失去焦點(diǎn)收起來，但是事實(shí)是它僅僅執(zhí)行了blur，onSearch事件里面的console并未執(zhí)行。

猜測(cè)原因做嘗試

首先第一反應(yīng)絕對(duì)是事件的觸發(fā)順序，所以我就想到了利器setTimeout來驗(yàn)證

onBlur () {
 setTimeout(() => {
  this.isShowRecommend = false
  this.searchVal = ''
  this.recommendList = []
 }, 500)
}

結(jié)果果然觸發(fā)了，因?yàn)檠舆t了blur先執(zhí)行了click。但是當(dāng)我們點(diǎn)擊其他區(qū)域的時(shí)候下拉窗口需要停頓一會(huì)再消失，這個(gè)很詭異，所以繼續(xù)想辦法調(diào)整。

分析：

1. 現(xiàn)在確認(rèn)是事件的優(yōu)先級(jí)的問題了，blur要優(yōu)先于click所以我們需要想辦法替換掉click

2. 我們知道click事件是由mousedown事件和mouseup事件組成，同時(shí)mousedown和mouseup觸發(fā)必須在同一個(gè)像素點(diǎn)上才會(huì)觸發(fā)click事件。即鼠標(biāo)點(diǎn)擊： mousedown -> mouseup -> click

3. 所以我們來寫一個(gè)demo看一下事件的執(zhí)行順序

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

結(jié)果

最后把click替換成mousedown，完成了問題修復(fù)

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

最終效果展示

以上是“js如何實(shí)現(xiàn)下拉菜單點(diǎn)擊旁邊收起效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！