js利用事件的阻止冒泡实现点击空白模态框的隐藏
更新时间：2014年01月24日 15:00:33 作者：
点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框，关于这一点，下面有个具体的实现
很多时候，我们做前端的时候都会有这样的小功能，点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框。假设如下场景，一个小按钮，点击可以弹出一个模态框。
就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮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
相关文章
这篇文章全面解析了Bootstrap排版使用方法，本文重点介绍Bootstrap标题排版，感兴趣的小伙伴们可以参考一下2015-11-11
JS在onclientclick里如何控制onclick的执行
这篇文章主要介绍了JS在onclientclick里如何控制onclick的执行的相关资料,需要的朋友可以参考下2016-05-05
这篇文章给大家介绍了js中的对象和原型，从工厂模式，构造函数方面展开话题，介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
在基于网页的打印输出或报表中，经常会牵扯到金额的大写，每次都打上去很麻烦，所以想法用一个JavaScript客户端脚本来实现自动转换，只需在需要显示大写金额的时候调用该JS函数，下面我们就来汇总下吧2015-10-10
这篇文章主要给大家介绍了关于ECharts饼图颜色设置的4种方式,ECharts饼图的颜色可以通过多种方式进行设置,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了JS实现长图上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了JavaScript对Cookie进行读写操作的方法,实例分析了javascript针对cookie的读写操作技巧,非常简单实用,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了微信小程序底部弹出框封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在JavaScript中使用严格模式(Strict Mode)
这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下2019-06-06
跟我学习javascript的最新标准ECMAScript 6，ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论