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();
      }
})

三、结语

拜拜!

  

原文地址:https://www.cnblogs.com/nangezi/p/9157112.html

时间: 2024-10-06 04:34:33

js的事件冒泡和点击其他区域隐藏弹出层的相关文章

点击弹出层以外的区域隐藏弹出层

我们店显示弹出层后,想让其消失,但又不想添加“X”来关闭,可以使用点击弹出层以外的区域来让该层消失的办法.下面如代码: $(".btn3").click(function(e){ e.stopPropagation();//阻止事件向上冒泡 $(".con-share").removeClass("hide"); }) //显示弹出层 $(document).click(function(e){ if(!$(".con-share&qu

点击页面其他区域隐藏弹出层

弹出层简称pop,隐藏方法有两种. 1. pop上阻止冒泡,document上click隐藏pop jquery实现 $("#showPop").on("click", function(e) { $("#pop").show(); $(document).one("click", function() { $("#pop").hide(); }); e.stopPropagation(); }); $(&

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

只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲突,毫无问题. 今天是踩了个React事件的坑,需求可以简化为:点击框体以外的部分则隐藏框体.最直接的想法,document上绑定个事件,设置控制显示隐藏的state为false,在框体上绑定个事件,阻止冒泡.这样点击框体内部就不会触发document上的事件. 等写完了,发现一个问题,无法阻止冒泡

react 点击空白处隐藏弹出层

点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡即可. class Select extends Component { constructor(props) { super(props); this.state = { selected: props.list[0], showList: false }; this.showList = thi

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

默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可能会带来很不好的体验效果,所以,我们会希望不会发生这种情况,事实上bootstrap dialog提供了大量的选项可以设置各种dialog的行为和效果.如下所示: <div class="modal fade" id="myModal" tabindex=&quo

js 点击 隐藏弹出层

document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#cicon"); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 if(!$("#cicon").is(":hidden")){ $(&q

JS简易弹出层

一个简易的弹出框,内容层自定义.为了简单灵活的在小项目中使用. 目标要求 模仿bootstrap的弹出层实现 如何实现 bootstrap弹出框的效果.经过研究后.思路如下 将要弹出的DIV要置于body直属.不必有遮罩DIV.它在运行时由JS生成.关闭时再删掉 弹出层DIV和遮罩层使用绝对定位并且长宽一样,在弹出前,将BODY设为无滚动条,以消除网页有滚动条时的盖不住问题 弹出层DIV.长宽与页面窗口一样,背景透明.可以单击(单击背景关闭弹出层功能),可以垂直滚动. 弹出层第二级为弹出内容父层

js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码代码如下: <a href="http://www.baidu.com" target="_bl

原生js阻止事件冒泡代码实例

原生js阻止事件冒泡代码实例:关于什么是事件冒泡这里就不多介绍了,可以参阅javascript事件冒泡简单介绍一章节,任何现象都是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便,下面就通过带来实例介绍一下如何阻止事件冒泡现象.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conte