Selecione apenas pai, exclua todo o resto enquanto clica em ()

Eu tenho um #container e botões que são filhos para este contêiner. Quando clico no próprio container (o espaço em branco ao redor dos botões), quero que ele mude sua cor de fundo, mas não quero que nada aconteça quando eu clicar nos botões.

Selecionando o #container no jquery, porém, faz com que clicar nos botões mude o bg também …

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

Eu tentei muitas coisas, nada parece estar funcionando.

Examine o destino original do evento:

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

Referência : event.target

Existe uma outra solução mais simples :

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

Verifique o id ao clicar, para não pegar os botões.

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