鼠标点击菜单以外的地方 使下拉菜单消失

//点击“显示菜单”按钮时,显示菜单,并阻止事件冒泡

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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,588评论 25 709
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,963评论 2 17
  • 艾灸后 1、灸后喝温开水一杯。 2、艾灸完半小时内,不可以用冷水洗手洗脸。艾灸完毕,全身毛细孔打开,易受寒凉。 3...
    三年陈艾贴阅读 1,530评论 0 0
  • 余十四岁离家,于邻县求学,每归家,落叶飘秋水,月照玉米堆。葡萄架下斟浊酒,丝瓜棚里度中秋。后辗转于寿光,离家千里,...
    四木先生阅读 770评论 0 0
  • 教育,这个词对于大家来说并不陌生。它无时无刻,随时随地的出现在我们的生命中。我们每个人总会有意无意地扮演着...
    心的暖暖阅读 423评论 1 1