javascript点击空白位置关闭弹出层/点击包含指定区域但不属于指定区域的部分响应点击事件

方法一：监听弹出层的点击事件->判断点击的区域不是内容区也不是内容区的子元素->关闭
（基于zepto.js，原生javascript或者JQ实现的原理也是一样的）

<body>
    <div id="test2">
        //空白遮罩、指定区域外
        <p id="test">
        //指定区域
        </p>
    </div>
</body>
$(document).on('click', function(e) {
    var contentEle= $('#test');
    if(contentEle!== e.target && contentEle.has(e.target).length === 0) {
        //关闭弹出层的代码或者需要在点击指定区域之外区域才执行的代码
    }
});

方法二：用Event对象的stopPropagation()方法来停止事件的传播

<body>
    <div id="test2">
    //空白遮罩、指定区域外
        <p id="test">
        //指定区域
        </p>
    </div>
</body>
$(document).on('click', '#test2', function(e) {
   //关闭遮罩层的代码或者需要在点击指定区域之外区域才执行的代码
});
$('body').on('click', '#test', function(e) {
   event.stopPropagation(); //阻止冒泡
   //需要执行的代码
}

需要特别注意的是需要把外层的父元素绑定到内层的子元素的上级元素。

原文链接：https://blog.csdn.net/wad13965/article/details/64503433