相同的类：在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'});
});