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

Posted 南歌子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

react 点击空白处隐藏弹出层

js 点击 隐藏弹出层

jquery点击空白处或者自身隐藏弹出层

js点击任意区域弹出层消失,js点击弹出层之外的任意区域弹出层消失,常见弹层的封装