jQuery事件-如何选择整个DIV，但不包括某些内部区域

Question

Think of the following HTML code to apply Jquery:

HTML code:

<div id="outer_div">
  <div id="inner_div_1"></div>
  <div id="inner_div_2"></div>
  <div id="inner_div_3"></div>
</div>

By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function. I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?

Attempted Jquery 1:

$("#outer_div:not(#inner_div_1)").on("click",function(){
    $("#outer_div").hide("slow");
});

Attempted Jquery 2:

$("#outer_div").not("#inner_div_1").on("click",function(){
    $("#outer_div").hide("slow");
});

Your support would be highly appreciated.

Answer 1

You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :

$("#outer_div").on("click",function(e){
    if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});

Answer 2

You can use some of the data in the event

$("#outer_div").on("click",function(e){
    if( // Fast check to see if this is the div
        e.target.id !=='inner_div_1'
        // We limit the 'closest()' code to the outer div. This adds children to the exclude
        && $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
        alert('good click');
    }
});

This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo .

---

Other properties can be used to, like a class:

$("#outer_div").on("click",function(e){
    if( e.target.className!=='even' 
        && $(this).closest('.even, #outer_div')[0].id=='outer_div'){
        alert('yay, clicked an odd');
    }
});

I made 7 lines, gave the even ones a class 'even' .