极客观点
项目管理
HarmonyOS
在很多网站，经常看到：
点击某个按钮或链接，出现一个弹窗或者展开一个模块，然后点击弹窗（模块）之外的空白，它会被关闭。看过bootstrap和一些其他的源码，有的是使用类似jQuery的.not()写的，但总感觉这样写不太好，应该怎么写是比较严谨的呢？
关于点击空白关闭弹窗的js写法推荐？
阅读 75.2k
来一个javascript 实现的方案吧 :
// 点击其他区域时, 隐藏指定区域(cDom)
document.addEventListener("click", event => {
var cDom = document.querySelector("#filter-header");
var tDom = event.target;
if (cDom == tDom || cDom.contains(tDom)) {
// ...
} else {
cDom.style.display = "none"
}
});
我自己写弹层时，就加了个这个功能。
其实，一般处理方式就是判断点击事件的 e.target 是否为非弹层区域。
不是的话，就关闭弹层。
注意将监听事件绑定在document上。绑定在body上，页面body高度没有超过一屏时，点击非body区域，是不起作用的。
我见过两种方案：
- 监听
document.body上的点击事件，如果来源不在目标范围内则关闭； - 在弹窗下、所有页面内容上放一个层（至于透明不透明自己看着办），点那个层的时候关闭。
$(document).mouseup(function(e){
var _con = $('#jstreedemo');
if(!_con.is(e.target) && _con.has(e.target).length === 0){
$("#jstreedemo").css("display","none");
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#test {
width: 80px;
//height: 60px;
margin:10px auto;
/*border: 1px solid blue;*/
}
#button {
display: block;
width:50px;
margin:10 auto;
}
#content {
width: 60px;
height: 60px;
text-align: center;
margin:10 auto;
/*background: #1d1d1d;*/
border: 1px solid red;
}
#shard {
position: absolute;
display: block;
top: 0px;
left:0px;
width: 100%;
height: 100%;
z-index: -1;
background: #d4f7d4;
}
</style>
</head>
<body>
<div id="shard" ></div>
<div id="test">
<a href="javascript:;" id="button">clickMe</a>
<div id="content" style="display:none">show</div>
</div>
<script>
$('#shard').hide();
$('#button').on('click',function(){
$('#content').css('display','block');
$('#shard').off('click');
$('#shard').hide();
setTimeout(function(){
$('#shard').show();
$('#shard').one('click',function(){
console.log('click ...');
$('#content').css('display','none');
$('#shard').hide();
})
}
, 0);
})
</script>
</body>
</html>利用事件冒泡和settimeout跳出事件队列的方式实现，新get到的技能，希望可以终结这个问题，一起进步哦~
$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){
...
});
正巧，在最近一个项目中我遇到了这个问题。
但我所面对的需求更复杂：要求页面中某一个元素高亮，页面中此元素其余部分变暗，但是页面还是可以滚动。点击此元素其它区域，取消此效果。
看了楼上很多回答，都是在body上做点击时间监听，我的方法并不是这样。
我的方法是在弹窗内建立一个层，覆盖窗口，用它来监听点击事件。
这样做的好处是，将弹窗移除后，相关的事件、DOM都可以一并移除,并且底层的大小可以通过控制父层的position属性，任意更改。
.wapper{
position:relative;
}
将上面这段css去掉之后，就成了一个覆盖整个窗口的mask了。
新手上路，请多包涵
同 fifsky 可以把弹窗上面的点击事件在最后阻止冒泡，然后点击的时候都消失。
我项目里遇到的问题更复杂一点，是有多个可以显示隐藏的层，点空白处全都消失，这几个层，点空白处全都消失，还要互斥显示。如果在body点击事件里做判断，或者调每个模块的方法感觉有点儿麻烦，不可扩展。
所以我的做法是，点body时，发个广播，注册广播的模块都隐藏，每个模块点击时也都可以发这个广播，监听广播的模块只要判断发广播的对象不是自己，都要隐藏起来。
被 4 篇内容引用
推荐问题
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}8 回答4.6k 阅读✓ 已解决
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？6 回答3.4k 阅读✓ 已解决
两个promise问题？
第一个问题，这个为什么先输出3后输出2呢 {代码...} 第二个问题，这个为什么会交错输出呢，142536 {代码...} promise小白一枚，上述两个疑问，希望能得到详细的解答5 回答2.8k 阅读✓ 已解决
网站的不同域名互相跳转如何保持登录态？
一个网站部署了多个域名（不是子域名），比如：www.abc.com和www.aaa.com,如何从一个域名跳转到另一个域名的时候，仍然保持登录态呢？6 回答2.3k 阅读
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。5 回答6.3k 阅读✓ 已解决
如何在JavaScript中从外部中断for循环的执行？
js中如何从外部中断for循环，起因是这段代码上层会反复进入这个for循环，每次进入的时候需要清除之前的执行效果，所以需要在循环外部来取消？大佬们知道如何做吗？4 回答2.2k 阅读✓ 已解决
Quartz如何根据cron表达式计算任务开始前发送通知的时间？
任务调度任务的执行时间是cron表达式，使用quartz定时器生成任务现在需要在每次任务开始前一定时间（例：1天、一周、15分钟）发送通知在不改前端的情况下。有什么好的做法实现吗。计算通知的cron，有点过于复杂，也没有找到工具可以使用4 回答2.8k 阅读✓ 已解决
宣传栏
这是当初在stackoverflow上看到的，非常简单的实现，这里的目标区域就是你的弹出窗口