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 相关文章推荐
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
js获取checkbox值的方法
Jan 28 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
JavaScript链式调用原理与实现方法详解
May 16 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
PHP开发需要注意的安全问题
2010/09/01 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP创建XML接口示例
2019/07/04 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
js实现拖拽功能
2017/03/01 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python多线程扫描端口示例
2014/01/16 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python中 * 的用法详解
2019/07/10 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python bytes string相互转换过程解析
2020/03/05 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
python中四舍五入的正确打开方式
2021/01/18 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
小摄影师教学反思
2014/04/27 职场文书
庆祝教师节活动总结
2015/03/23 职场文书