除指定區域外點選任何地方隱藏DIV

方式一:

<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();
})

方式二:

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

$('body').click(function(e) {
        var target = $(e.target);

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

方法三:


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


//判斷:當前元素是否是被篩選元素的子元素 
    // 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