Выберите только родитель, исключите все остальное, пока нажмите ()

Question

У меня есть #container и кнопки, которые являются дочерними для этого контейнера.Когда я щелкаю сам контейнер (пробел вокруг кнопок), я хочу, чтобы он изменил цвет фона, но я не хочу, чтобы при нажатии кнопок ничего не происходило.

Однако выбор #container в jquery,заставляет нажимать кнопки и изменять 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

Answer 2

Существует более простое другое решение:

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

Answer 3

Проверяйте идентификатор при нажатии, чтобы не забирать кнопки.

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