选择父级,在click()时排除其他所有内容

Question

我有一个#container和按钮,它们是这个容器的子代.当我点击容器本身(按钮周围的空白区域)时,我希望它改变它的背景颜色,但是当我点击按钮时我什么也不想发生.

但是,在jquery中选择#container会使点击按钮也会改变bg ...

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

我尝试过很多东西,似乎没什么用.

Answer 1

检查事件的原始目标:

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

参考:event.target