jquery - 单击()时仅选择父级，排除其他所有内容

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