js的事件冒泡和点击其他区域隐藏弹出层
一、前言
在编写页面的时候,我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。如果弹出层都没有较好的体验,那何谈通过交互来提升好感。。。
首先提出几个弹出层的注意点:
- 弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章;
- 弹出层的设计一定要好看,按钮要符合项目的主色调;
- 弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应;
- 点击其他区域隐藏弹出层。。。
二、正文
今天,主要说说点击其他区域隐藏弹出层。笔者被这个效果折磨了很久,几乎每次实现这个效果都要查一遍资料,一次次尝试才能达到想要的效果。如此麻烦,皆是因为对事件冒泡的理解不够已经错误处理。
什么是事件冒泡?为什么要使用它?
事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(document);
在实现点击其他区域隐藏弹出层时,需要对document绑定点击事件,而事件冒泡会使点击其它节点时仍然触发该事件,从而造成事件冲突,导致该显示弹出层时显示不出,不该隐藏时却又隐藏了弹出层。
<style type="text/css">
.layer-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content; center;
align-items: center;
display: none;
}
.layer-main{
width: 75%;
padding: 20px;
max-width: 400px;
}
</style> <body>
<button>显示弹出层</button> <div class="layer-container">
<div class="layer-main">
<div class="layer-header"></div>
<div class="layer-content"></div>
<div class="layer-footer">
<div class="layer-button">确认</div>
</div>
</div>
</div> <script>
//点击按钮,显示弹出层
$("button").bind("click", function(){
$(".layer-container").css("display", "flex");
event.stopPropagation();//==========阻止冒泡1
})
//点击其他区域,隐藏弹出层
$(document).bind("click", function(){
$(".layer-container").css("display", "none");
})
//点击弹出层内确认按钮
$(".layer-button").bind("click", function(){
console.log("点击了确认按钮")
})
//给弹出层绑定点击事件,阻止冒泡
$(".layer-main").bind("click", function(){
event.stopPropagation();//==========阻止冒泡2
})
</script>
</body>
说明:
- $(document)即给整个文档绑定点击事件,点击则隐藏弹出层container;
- $("button")给按钮绑定点击事件,点击即显示弹出层container;
此处必须加event.stopPropagation()阻止冒泡,否则先执行button的事件显示弹出层container,又向上冒泡执行document事件隐藏弹出层container,导致最终点击没有效果; - $(".layer-main")给弹出层main绑定点击事件,点击它或冒泡到它时,即阻止继续冒泡到document;
此处的点击事件以及阻止冒泡必须加,否则点击弹出层main或里面的其他节点,都会冒泡到document,从而隐藏弹出层container,导致事件紊乱。
其实,还可以通过事件的目标(event.target)来识别当前点击的节点,从而进行接下来的操作,比如对指定的节点的特殊操作
==>>除指定区域外点击任何区域都隐藏div
$('body').click(function(e) {
var target = $(e.target);
// 如果#layer或者#btn下面还有子元素,可使用
// !target.is('#btn *') && !target.is('#layer *')
if(!target.is('#btn') && !target.is('#layer')) {
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
}
}); $('body').click(function(e) {
if(e.target.id != 'btn' && e.target.id != 'overlay')
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
})
三、结语
拜拜!
js的事件冒泡和点击其他区域隐藏弹出层的更多相关文章
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- jquery层居中,点击小图查看大图,弹出层居中代码
1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- js阻止事件冒泡(phpcms,浮窗第一次10秒弹出后每30秒弹出,动态更换日期)
/* v9_date_list 日期表 tiptime 考试日期(数据类型为日期) 如果要实现浮窗淡入淡出用jquery的("#main0").fadeIn(3500);淡出(&q ...
- js 点击 隐藏弹出层
document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...
- jsp html 实现隐藏输入框,点击可以取消隐藏&&弹出输入框
jsp代码: <script language="javascript" type="text/javascript"> function chg ...
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
随机推荐
- toxiproxy 安装试用
备注: 实际上是一个代理工具,但是又不是简单的进行代理(tcp,可以配置策略,toxics 实现延迟,模拟故障, 对于这个大家可能了解的就是netflix 公司的chaos monkey, ...
- bzoj 3996 [TJOI2015]线性代数——最小割
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3996 b[ i ][ j ] 要计入贡献,当且仅当 a[ i ] = 1 , a[ j ] ...
- CentOS(五)--Linux系统的分区概念
一.系统分区 首先先普及一下有关系统分区的一些知识: 硬盘分区有三种,主磁盘分区.扩展磁盘分区.逻辑分区. 一个硬盘主分区至少有1个,最多4个,扩展分区可以没有,最多1个.且主分区+扩展分区总共不能超 ...
- Zookeeper--分布式锁和消息队列
在java并发包中提供了若干锁的实现,它们是用于单个java虚拟机进程中的:而分布式锁能够在一组进程之间提供互斥机制,保证在任何时刻只有一个进程可以持有锁. 分布式环境中多个进程的锁则可以使用Zook ...
- Java并发-Runnable、Callable、Future、Future Task
Runnable: Runnable的代码非常简单,他是一个接口,且接口中只有一个方法,run(),创建一个类实现他,把一些费时操作写在其中,然后使用某个线程去执行该Runnable实现类即可实现多线 ...
- Linux学习笔记 -- 文件包含
简述 简单来讲,shell 中的文件包含指的是在一个文件中引用另外一个文件.通过这种方式,我们可以将一些公用的代码封装为一个独立的文件,并在需要的时候引用它即可. 语法 . filename # 注意 ...
- 关于Eclipse中复制粘贴一个项目后的操作
今天在做一个小Demo,内容和之前的项目有些类似就直接复制过来了,项目名修改了,web.xml的项目名也修改了,可是部署到Tomcat之后,以这个新项目名进行访问就会出现404的错误,只可以使用复制之 ...
- Druid.io系列(一):简介
原文链接: https://blog.csdn.net/njpjsoftdev/article/details/52955676 Druid.io(以下简称Druid)是面向海量数据的.用于实时查询与 ...
- OD 实验(二) - 绕过序列号验证
需要破解的程序 输入用户名和序列号,点击 Check,程序会进行校验 用 OD 打开程序 按快捷键 Ctrl+F9 跟随表达式 GetDlgItemTextA 点击 ok 在这里调用了 GetDlgI ...
- Python Twisted系列教程20: Twisted和Erlang
作者:dave@http://krondo.com/twisted-and-erlang/ 译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...