Javascript 单击背景div时关闭div

我想在单击背景Div（SearchBlur）时关闭一个Div。 我的问题是，如果我点击显示的div，它也会关闭

这是我的javascrip代码

SearchBlur.addEventListener('click', closePopup);

function closePopup(){

   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.SearchBlur').fadeOut("normal");
        counter = 0;
    }

}

这是我的html

<div class="SearchBlur" id="SB_Back">
    <div class="div_container" id="container">
        <div class="grid_div">
            <div id="gridwrapper">
            </div>
        </div>
    </div>
</div>

程序如下所示

我想关闭弹出窗口，然后单击黑色背景

---

对不起，我的英语不好：你想关闭哪个部门

从我所看到的，您正在淡出最高级别的div，因此嵌套在SearchBlur中的所有标记也将被隐藏。我假设您希望以更深的嵌套div为目标，例如：

函数closePopup（）{
如果（计数器==1）{
$（“#搜索输入”）。动画（{“左”：“-=300px”}，“正常”）；
$（'.div_container'）。淡出（“正常”）；
计数器=0；
}
}

您要关闭哪个部门

从我所看到的，您正在淡出最高级别的div，因此嵌套在SearchBlur中的所有标记也将被隐藏。我假设您希望以更深的嵌套div为目标，例如：

函数closePopup（）{
如果（计数器==1）{
$（“#搜索输入”）。动画（{“左”：“-=300px”}，“正常”）；
$（'.div_container'）。淡出（“正常”）；
计数器=0；
}
}

尝试使用以下代码将侦听器添加到子div

event.stopPropagation();

---

尝试使用以下代码将侦听器添加到子div

event.stopPropagation();

使用

onclick

var计数器=1；
$（“.SearchBlur”）。在（“单击”，函数（）{
如果（计数器==1）{
$（“#搜索输入”）。动画（{“左”：“-300px”}，“正常”）；
$（'.SearchBlur'）。淡出（“正常”）；
计数器=0；
}
});
$（“.div_容器”）。在（“单击”，函数（）{
event.stopPropagation（）；
});

.SearchBlur{
背景：蓝色；
}
.div_集装箱{
宽度：100px；
背景：红色；
}

分区集装箱

使用

onclick

您想要的孩子

var计数器=1；
$（“.SearchBlur”）。在（“单击”，函数（）{
如果（计数器==1）{
$（“#搜索输入”）。动画（{“左”：“-300px”}，“正常”）；
$（'.SearchBlur'）。淡出（“正常”）；
计数器=0；
}
});
$（“.div_容器”）。在（“单击”，函数（）{
event.stopPropagation（）；
});

.SearchBlur{
背景：蓝色；
}
.div_集装箱{
宽度：100px；
背景：红色；
}

分区集装箱

以一种简单的方式，您的html如下所示：

<div class="blur">
    <div class="popup"></div>
</div>

---

下面是代码笔：

以一种简单的方式显示您的html：

<div class="blur">
    <div class="popup"></div>
</div>

---

这里是codepen:

如果我点击显示的div，你能给我们展示css

你是什么意思吗？如果我点击显示的div，你能给我们展示css
你是什么意思吗？这是你的意思吗？很乐意帮助：）这是你的意思吗？很乐意帮助：）当我点击SearchBlur而不是div容器时，我想关闭除oly之外的所有内容。但是当我点击SearchBlur而不是div容器时，我想关闭除oly之外的所有容器。但我也会点击它关闭的容器。