除指定区域外点击任何地方隐藏DIV ————js

最新推荐文章于 2023-08-04 10:56:12 发布

原创最新推荐文章于 2023-08-04 10:56:12 发布 · 501 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用原生JavaScript和jQuery处理点击事件，以实现当点击页面上除特定元素外的任意位置时，该元素将被隐藏。通过三种不同的方法展示了如何阻止事件冒泡，保持目标元素的显示状态。

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

这个问题出现的地方非常多，例如点击弹出下拉菜单中，弹框等。

css部分


#myDiv{ 
    border:1px solid #000000; 
    width:200px; 
    height:100px; 
    background:#FF0000; 
    color: #FFFFFF;
    margin: 50px auto;

html部分


<div id="myDiv">隐藏的层</div>

js部分


window.onload=function(){
    var myDiv = document.getElementById("myDiv");
    document.addEventListener("click",function(){
        myDiv.style.display="none";
    });
    myDiv.addEventListener("click",function(event){
        event=event||window.event;
        event.stopPropagation();
    });
};

以上部分是js原生写法：

那么jQuery的写法怎么写：

<div class="btn" id="btn">btn</div>

<div class="box"></div>

方法一：

$(".btn").on('click',function(e){
   $('.box').show();
    e.stopPropagation();
}
$("body").on('click',function(){
   $('.box').hide();
}

方法二：

$('body').click(function(e) {
        var target = $(e.target);
 
        // 如果#overlay或者#btn下面还有子元素，可使用
        // !target.is('#btn *')
        if(target.is('#btn')){
            $('.box').show();
        }else{
            $('.box').hide();
        }
    });

方法三：


//判断:当前元素是否是被筛选元素的子元素 
    // jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 
 
    //判断:当前元素是否是被筛选元素的子元素或者本身 
    jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length > 0); };
    $(document).click(function(event){ 
        if(!$(event.target).isChildAndSelfOf('#btn')){
            $('.box').hide();
        }
    });
 
    $('#btn').on('click',function(){
        $('.box').show();
    })

转载地址：https://www.jianshu.com/p/2a08cb1d7dfe