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

原创于 2017-03-21 20:54:10 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了两种处理网页弹出层外部点击以关闭弹出层的方法：一是监听点击事件并判断目标是否为内容区域以外；二是使用Event对象的stopPropagation()方法阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：监听弹出层的点击事件->判断点击的区域不是内容区也不是内容区的子元素->关闭
（基于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(); //阻止冒泡
   //需要执行的代码
}