开发者社区> 问答> 正文

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

例如:

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

展开
收起
杨冬芳 2016-06-13 18:25:19 2391 0
1 条回答
写回答
取消 提交回答
  • IT从业

    简单方法,控制事件冒泡:

    <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);
    2019-07-17 19:36:44
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载