欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)

 更新時間：2019年09月29日 11:32:23   作者：jingqian_xi  
這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

背景：

最近在搞一個需求：搜索框，輸入時顯示聯(lián)想詞下拉列表，當點擊聯(lián)想詞跳轉(zhuǎn)到搜索頁，如果點擊其他部分收起聯(lián)想的下拉列表。接到需求后第一反應(yīng)用失焦（blur）去做收起操作避免body的監(jiān)控，隨后就踩坑里了，下面情景再現(xiàn)，一步一步來看這個問題的解決（里面的demo等會用vue實現(xiàn)）

帶有bug的版本演示圖

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

問題拋出

當我點擊上面的聯(lián)想詞的時候它的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) {
    // 這里需要給后臺發(fā)送請求來獲取聯(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>

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

猜測原因做嘗試

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

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

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

分析：

  1. 現(xiàn)在確認是事件的優(yōu)先級的問題了，blur要優(yōu)先于click所以我們需要想辦法替換掉click
  2. 我們知道click事件是由mousedown事件和mouseup事件組成，同時mousedown和mouseup觸發(fā)必須在同一個像素點上才會觸發(fā)click事件。即鼠標點擊： mousedown -> mouseup -> click
  3. 所以我們來寫一個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>

最終效果展示

好了今天的踩坑和填坑運動結(jié)束，以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論