只选择父级，在click（）时排除其他所有内容

我有一个#container和按钮，它们是这个容器的子代。 当我点击容器本身（按钮周围的空白区域）时，我希望它改变它的背景颜色，但是当我点击按钮时我什么都不想要。

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

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

我尝试过很多东西，似乎没什么用。

Answer 1

检查事件的原始目标：

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

参考 ： event.target

Answer 2

还有一个更简单的解决方案：

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

Answer 3

单击时检查ID，因此您不会选择按钮。

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