js利用事件的阻止冒泡实现点击空白模态框的隐藏
时间：2021-01-01 15:27:19|栏目：JavaScript代码|点击： 次
很多时候，我们做前端的时候都会有这样的小功能，点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框。假设如下场景，一个小按钮，点击可以弹出一个模态框。
就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮id：btn，模态框id：model
也许我们最简单的思路就是直接在document上监听一个事件，伪代码如下：
按钮点击弹出事件监听：
$("#btn").bind("click",function(e){
if(e.stopPropagation){//需要阻止冒泡
e.stopPropagation();
}else{
e.cancelBubble = true;
}
})
$(document).bind("click",function(e){
if(点击事件不在model上){
隐藏模态框;
}
})
乍一看，这是没有问题的，但是，其实有很多问题，首先，我们得注意阻止冒泡，否则，点击按钮，实际是触发了上面两个事件，modal是弹不出来的，其实是弹出来了，立马又隐藏了，而且，当我们在模态框上还有许多小控件的时候，我们对于模态框中的点击就很难进行判断。
这里，我认为有一种最经典的方法，很简单，但是很巧妙，
首先，对于模态框监听一个事件如下：
$("#modal").bind("click", function(event) {
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
});
只是简单阻止模态框中的点击事件冒泡，
然后：
$(document).one("click", function(e){
var $target = $(e.currentTarget);
if ($target.attr("id") != "modal") {
$("#modal").css("display", "none");
}
});
搞定，so easy
就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮id：btn，模态框id：model
也许我们最简单的思路就是直接在document上监听一个事件，伪代码如下：
按钮点击弹出事件监听：
复制代码 代码如下:
$("#btn").bind("click",function(e){
if(e.stopPropagation){//需要阻止冒泡
e.stopPropagation();
}else{
e.cancelBubble = true;
}
})
复制代码 代码如下:
$(document).bind("click",function(e){
if(点击事件不在model上){
隐藏模态框;
}
})
乍一看，这是没有问题的，但是，其实有很多问题，首先，我们得注意阻止冒泡，否则，点击按钮，实际是触发了上面两个事件，modal是弹不出来的，其实是弹出来了，立马又隐藏了，而且，当我们在模态框上还有许多小控件的时候，我们对于模态框中的点击就很难进行判断。
这里，我认为有一种最经典的方法，很简单，但是很巧妙，
首先，对于模态框监听一个事件如下：
复制代码 代码如下:
$("#modal").bind("click", function(event) {
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
});
只是简单阻止模态框中的点击事件冒泡，
然后：
复制代码 代码如下:
$(document).one("click", function(e){
var $target = $(e.currentTarget);
if ($target.attr("id") != "modal") {
$("#modal").css("display", "none");
}
});
搞定，so easy
栏 目：JavaScript代码
本文地址：http://www.codeinn.net/misctech/39301.html
