js利用事件的阻止冒泡实现点击空白模态框的隐藏


Posted in Javascript onJanuary 24, 2014

很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框。假设如下场景,一个小按钮,点击可以弹出一个模态框。

就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮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 相关文章推荐
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
jquery实现动态画圆
Dec 04 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 #Javascript
js关于字符长度限制的问题示例探讨
Jan 24 #Javascript
JS方法调用括号的问题探讨
Jan 24 #Javascript
Array栈方法和队列方法的特点说明
Jan 24 #Javascript
js sort 二维数组排序的用法小结
Jan 24 #Javascript
js二维数组排序的简单示例代码
Jan 24 #Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 #Javascript
You might like
ThinkPHP之import方法实例详解
2014/06/20 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
javascript如何写热点图
2015/12/08 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python实现simhash算法实例
2014/04/25 Python
跟老齐学Python之list和str比较
2014/09/20 Python
python运行时间的几种方法
2016/06/17 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python挖矿算力测试程序详解
2019/07/03 Python
python实现两个文件夹的同步
2019/08/29 Python
Python timeit模块的使用实践
2020/01/13 Python
Python序列化pickle模块使用详解
2020/03/05 Python
全球工业:Global Industrial
2020/02/01 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
临时租车协议范本
2014/09/23 职场文书
圣诞节开幕词
2015/01/29 职场文书
工程部部长岗位职责
2015/02/12 职场文书
一个都不能少观后感
2015/06/04 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
高三语文教学反思
2016/02/16 职场文书
python开发飞机大战游戏
2021/07/15 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
基于docker安装zabbix的详细教程
2022/06/05 Servers