点击遮罩层没有内容的地方进行隐藏

在项目中遇到的问题，因为是手机端的遮罩层，为了给用户更好的体验，需要在遮罩层中点击没有内容的地方讲遮罩层进行隐藏

这个主要用的知识点是事件的冒泡和捕获

事件的冒泡：是从里向外，DOM的层次像冒泡一样，不断的向上一级上升

事件的捕获：是从外向里

注意：1.ie只有事件的冒泡没有事件的捕获

     2，事件的捕获会先发生

例子：

    <style>
        .popup {display:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:300;background:rgba(0,0,0,0.6);filter:Alpha(opcity=60);overflow: auto;}
        .abc{width: 100%;height: 100px;background-color: wheat}
        .popup_hide{background-color: white;width: 100%;height: 100px;}
    </style>

<div class="abc">
    点我出现遮罩层哦
</div>
<div class="popup">
    <div class="popup_hide">
        asdfghjbvcsa
    </div>
</div>

<script>
    $('.abc').on("click",function(){
        $('.popup').show();
    });
    $(".popup").on("click",function(){
        $(this).hide();
    });
    $(".popup .popup_hide").on("click",function(e){
        e.stopPropagation();
    })
</script>

解析：点击的popup使整个遮罩层进行隐藏，点击内容块（.popup_hide）阻止了事件的冒泡，使popup_hide的父元素popup阻止，不会触发了这个事件

从而使点击popup_hide以外的内容将遮罩层进行隐藏

注意：引入jquery哦