javascript - 跪求大神:鼠标点击菜单以外的地方 使下拉菜单消失

问题描述

问 题

例如:

百度，google上面的链接，点击链接之后，出现下拉菜单，鼠标离开不消失，鼠标点击菜单以外的地方，才会使下拉菜单消失。这样的功能怎么实现？谁能给个类似的代码参考一下？

解决方案

简单方法，控制事件冒泡：

<button class="showBtn">显示菜单</button>
<!-- 菜单默认不显示 -->
<div class="menu">
  <ul>
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
  </ul>
</div>

//点击显示菜单按钮时，显示菜单，并阻止事件冒泡
document
.querySelector('.showBtn')
.addEventListener('click', function(e){
    document.querySelector('.menu').classList.add('show');
    e.stopPropagation();//关键在于阻止冒泡
}, false);

//点击菜单内部时，阻止事件冒泡。(这样点击内部时，菜单不会关闭)
document
.querySelector('.menu')
.addEventListener('click', function(e){
    e.stopPropagation();
}, false);

//监听整个document的点击事件，如果能收到事件(说明点击源既不是显示菜单按钮，也不来自菜单内部)，就可以放心关闭菜单了
document
.addEventListener('click', function(){
    document.querySelector('.menu').classList.remove('show');
}, false);

demo在这：jsfiddle

这篇关于javascript - 跪求大神:鼠标点击菜单以外的地方 使下拉菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！