JS点击某特定区域外关闭当前弹框

最新推荐文章于 2024-03-04 16:45:57 发布

云兮莫愁

最新推荐文章于 2024-03-04 16:45:57 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/weixin_44316854/article/details/107057136

JS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种实现弹框交互的方法，通过全局监听点击事件并利用e.target和closest()函数来判断是否关闭弹框，确保点击弹框内部时不触发关闭操作。

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

<div>
    <!--弹框1 div-->
    <div class='crimes-penalty-title'>
        <div class='crimes-penalty-title2'></div>
    </div>
     <!--其他区域-->
    <div class='crimes-penalty-content'>
    </div>
</div>

1.首先设置全局的监听事件，通过点击事件查找相应DOM，进行判断是否关闭弹框



$(function(){
  $(document).bind("click", function(e){
    	 if ($(e.target).closest(".crimes-penalty-content").length == 0) {
    		//关闭弹框操作
    	}
    });
})

2. e.target 用于直接接受事件的目标DOM元素

3. closest()用于查找接近的列表元素或其子后代元素，以保证点击弹框DIV内部的元素时也不会关闭弹框