Select only parent, exclude everything else while

问题:

I have a #container and buttons which are children to this container. When I click the container itself (the white space around the buttons), I want it to change its background color but I want nothing to happen when I click the buttons.

Selecting the #container in jquery, though, makes clicking the buttons change the bg as well...

<div id="container">
   <div class="button>
      <span class="text">Button 1</span>
   </div>
   <div class="button>
      <span class="text">Button 2</span>
   </div>
</div>

$("#container").click(function() {
   $('#container').css({background: 'blue'});
});

I've tried many things, nothing seems to be working.

回答1:

Examine the original target of the event:

$("#container").click(function(event) {
   if(event.target === this) {
       $('#container').css({background: 'blue'});
   }
});

Reference: event.target

回答2:

There is a simpler another solution:

$('#container button').click(function(event) {
    event.stopPropagation();
});

回答3:

Check the id when clicking, so you don't pick up the buttons.

$("#container").click(function(event) {
   if(event.target.id === "container") {
       $('#container').css({background: 'blue'});
   }
});