Одинаковые классы: Выберите ребенка, но не родитель в Jquery

Question

Я имею следующую структуру:

<div class="box blue"> 
    <div class="box red"> 

    </div> 
    <div class="box green"> 

    </div> 
</div> 

В принципе, есть коробки, которые могут содержать другие коробки.

Теперь я хочу архивировать, что если кто-то нажимает на родительский блок (синий), фон меняется, например, на белый.

НО, если кто-то нажимает на дочерний ящик (красный), фон дочернего ящика, который был красным, должен быть белым.

Я попытался следующие:

$('.box').click(function(){ 
    $(this).css({'background-color': '#fff'}); 
}); 

Это не работает, потому что если я нажимаю на детской коробке, например, я вызвать щелчок на родителя.

Кто-нибудь знает решение?

Answer 1

Вы должны предотвратить событие кипящего использования

e.stopPropagation(); 

Фиксированного кода следующим образом:

$('.box').click(function(e){ 
    e.stopPropagation(); 
    $(this).css({'background-color': '#fff'}); 
});