实现点击父容器响应事件，点击子容器不受影响

实现点击父容器响应事件，点击子容器不受影响

---

利用父相子绝原理，我们先创建一个div，并使其相对定位,再创建一个使用绝对定位的子元素，像这样

<div class="father" style="position: relative;">
 	<div class="mask" style="position: absolute;">		</div>
</div>

这时我们就可以把这个子元素作为遮罩来使用。我们用contents类来代表内容类

    <div class="father" style="position: relative;background: rgba(255, 0, 0, 0.555);">
        <div class="mask"></div>
        <div class="contents">
            hello
        </div>
    </div>

给他们设置一些属性，让他们布局合理，层级正确

    /* 给父元素设置想要的宽高 */
    .father{
        height: 200px;
        width: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        border-radius: 50px;
        margin: 50px;
    }
    /* 使遮罩元素大小撑满整个父元素 */
    .mask {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.541);
        height: 100%;
        width: 100%;
    }
    /* 注意内容元素也需要相对定位，不然层级不会上来 */
    .contents{
        position: relative;
    }

这时只要给.mask加一个点击事件就可做到，点击遮罩响应事件，而点击子组件不受影响的效果了

比如添加一个点击关闭事件

    $(".mask").click(function (e) {
        e.preventDefault();
        $(".this").addClass("displayNone")
        $(".contents").addClass("displayNone")
    });

很多弹窗的场景会用到以上思路，如果各位看官有更好的思路欢迎评论