在很多网站，经常看到：
点击某个按钮或链接，出现一个弹窗或者展开一个模块，然后点击弹窗（模块）之外的空白，它会被关闭。看过bootstrap和一些其他的源码，有的是使用类似jQuery的.not()写的，但总感觉这样写不太好，应该怎么写是比较严谨的呢？
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
10
1571
收藏
这是当初在stackoverflow上看到的，非常简单的实现，这里的目标区域就是你的弹出窗口
我见过两种方案：
document.body上的点击事件，如果来源不在目标范围内则关闭；$el_box = $('.box');//弹出层
$el_box.click(function(e){
e.stopPropagation();//阻止弹出层的click事件，防止冒泡到body
});
$(document).one('click',function(e){//我的弹出层元素是动态载入的，使用过后就销毁了，所以用了one,可以使用bind
$el_box.remove();
});
这样如何？？
$('html').on('click',function() {
...
});
$('#drop-menu').on('click',function(event){
event.stopPropagation();
);
$('#btn-menu').on('click',function(event){
...
});
同 fifsky 可以把弹窗上面的点击事件在最后阻止冒泡，然后点击的时候都消失。
我项目里遇到的问题更复杂一点，是有多个可以显示隐藏的层，点空白处全都消失，这几个层，点空白处全都消失，还要互斥显示。如果在body点击事件里做判断，或者调每个模块的方法感觉有点儿麻烦，不可扩展。
所以我的做法是，点body时，发个广播，注册广播的模块都隐藏，每个模块点击时也都可以发这个广播，监听广播的模块只要判断发广播的对象不是自己，都要隐藏起来。
我自己写弹层时，就加了个这个功能。
其实，一般处理方式就是判断点击事件的 e.target 是否为非弹层区域。
不是的话，就关闭弹层。
注意将监听事件绑定在document上。绑定在body上，页面body高度没有超过一屏时，点击非body区域，是不起作用的。
最高票可用，谢谢了