重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

js如何实现下拉菜单点击旁边收起效果

这篇文章主要为大家展示了“js如何实现下拉菜单点击旁边收起效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“js如何实现下拉菜单点击旁边收起效果”这篇文章吧。

创新互联是工信部颁发资质IDC服务器商，为用户提供优质的四川服务器托管服务

演示图

js如何实现下拉菜单点击旁边收起效果

备注：最后的搜索跳转我直接用console代替掉了，但是并没有执行

问题抛出

当我点击上面的联想词的时候它的onSearch并不能执行

demo代码展示

0">

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

猜测原因做尝试

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

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')
  }
}

结果

js如何实现下拉菜单点击旁边收起效果