一、前言

　　在编写页面的时候，我们经常使用到弹出层。对于弹出层，原本的意义就是增加与用户的交互，提升用户的好感度。如果弹出层都没有较好的体验，那何谈通过交互来提升好感。。。

　　首先提出几个弹出层的注意点：

  • 弹出层的界面需要统一，不一致的弹出层并不能增加美感，相反还会显得页面布局更加杂乱无章；
  • 弹出层的设计一定要好看，按钮要符合项目的主色调；
  • 弹出层的宽度固定屏幕占比，设置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的事件冒泡和点击其他区域隐藏弹出层的更多相关文章

  1. 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  2. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  3. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  4. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  5. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. js阻止事件冒泡(phpcms,浮窗第一次10秒弹出后每30秒弹出,动态更换日期)

    /* v9_date_list 日期表 tiptime 考试日期(数据类型为日期) 如果要实现浮窗淡入淡出用jquery的("#main0").fadeIn(3500);淡出(&q ...

  7. js 点击 隐藏弹出层

    document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#ci ...

  8. jsp html 实现隐藏输入框，点击可以取消隐藏&&弹出输入框

    jsp代码: <script language="javascript" type="text/javascript"> function chg ...

  9. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

随机推荐

  1. mongooseim xmpp 服务器docker 安装试用

    备注:    预备环境docker  xmpp client   1. 启动mongooseim docker run -d -t -h mongooseim-1 --name mongooseim- ...

  2. 性能指标术语&理发店模型

    2015-11-26 09:13:53 响应时间 响应时间=呈现时间+系统响应时间 呈现时间取决于数据在被客户端收后到呈现出页面所消耗的时间: 系统响应时间指应用系统从请求发出开始到客户端接收到数据所 ...

  3. （四）、Fiddler打断点

    一.打断点是Fiddler一个比较好用的功能,它可以做一些手工操作很难做的事情. 那为什么要打断点? 看下图,Fiddler打开后,Client(客户端)发送的请求会先经过Fiddler,然后Fidd ...

  4. 完美版js金钱正则表达式校验

    <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8& ...

  5. OPCClient和OPCServer在Windows上运行方式的恩怨

    http://www.diangon.com/wenku/PLC/201504/00021970.html 近段时间,遇到不少人都被OPCClient与OPCServer之间的通讯搞得头大,通过几次远 ...

  6. 带ssl的websocket例子

    还是在那个websocket_demo的例子 rebar-creator create-app websocket_demo tree一下看看大概目录 ├── cert │   ├── cowboy- ...

  7. JVM内存管理之垃圾搜集器参数精解

    本文是GC相关的最后一篇,这次LZ只是罗列一下hotspot JVM中垃圾搜集器相关的重点参数,以及各个参数的解释.废话不多说,这就开始. 垃圾搜集器文章传送门 JVM内存管理------JAVA语言 ...

  8. Java运算符，关系运算符

    关系运算符介绍 下表为Java支持的关系运算符 表格中的实例整数变量A的值为10,变量B的值为20: 运算符 描述 例子 == 检查如果两个操作数的值是否相等,如果相等则条件为真. (A == B)为 ...

  9. 启动 Eclipse 报错 “An internal error occurred during: "Initializing Java Tooling". java.lang.NullPointerException”

    之前在线升级了Eclipse,由于网络/或者是设置问题,在升级完成后启动Eclipse出线上述错误... 解决方法 1. 删除目录工作目录下面的.project文件夹: 如下图: 2. 关闭Eclip ...

  10. 【BZOJ】2342: [Shoi2011]双倍回文（Manacher）

    题目 传送门:QWQ 分析 (sb如我写了发不知道什么东西在洛谷上竟然水了84分 嗯咳 设$ i $为双重回文的中心 如果$ j~i $ 可以被算作答案,只有满足如下两式: $ p[j]+j \geq ...