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 Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
本文通过实例代码给大家介绍了BootStrap Table复选框默认选中功能(从数据库获取到对应的状态进行判断是否为选中状态),代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧2017-07-07ES6使用 Array.includes 处理多重条件用法实例分析
这篇文章主要介绍了ES6使用 Array.includes 处理多重条件用法,结合实例形式分析了Array.includes基本功能、原理及处理多重条件相关操作技巧,需要的朋友可以参考下2020-03-03
最新评论