Javascript 停止传播事件侦听器单击，但仍允许元素内发生其他单击事件

我创建了一个相当经典的模态。固定模态在屏幕中部。半透明背景和中间的一个盒子。

该框包含一些单击事件侦听器（例如关闭X和执行另一个操作的按钮）

我想允许用户通过点击外部背景关闭模式

HTML示例 我的问题是，如果您也在

.modal\uu internal

中单击，则会触发此命令

因此，我尝试将eventListener添加到

stopPropagation（）

现在，这将阻止my

.modal\u closebtn

的eventListener以及在modal中发生的任何其他事件

如何确保单击背景div仅在

modal

div上有效，而不在

modal\uu-inner

或任何其他上有效？不幸的是，当我在我的div内单击后查看

e.currentTarget

时，它返回

.modal

而不是

.modal\uu internal

，即使看起来我在该div内单击了

---

非jQuery解决方案请

事件对象具有事件的原始版本，使用它来确定事件的来源

var modal=document.querySelector（“.modal”）；
modal.addEventListener（“单击”，（e）=>{
如果（例如，目标！==模态）返回；
this.toggleModal（）；
});

事件对象具有事件的原始内容，请使用该内容确定事件的来源

var modal=document.querySelector（“.modal”）；
modal.addEventListener（“单击”，（e）=>{
如果（例如，目标！==模态）返回；
this.toggleModal（）；
});

为了避免执行

querySelector

太多次并获得一点性能，请将结果存储到变量中

var elem=document.querySelector（“.model”）
元素addEventListener（“单击”，（e）=>{
如果（e.target！==elem）返回；
log（'toggle！'）；
//this.toggleModal（）；
});
.modal{
宽度：300px
高度：300px；
边框：1px实心#000
}
.modal__内部{
宽度：100px
高度：100px；
边框：1px纯红
}

父模态






内模态
X
为了避免执行
querySelector
太多次并获得一点性能，请将结果存储到变量中


var elem=document.querySelector（“.model”）
元素addEventListener（“单击”，（e）=>{
如果（e.target！==elem）返回；
log（'toggle！'）；
//this.toggleModal（）；
});
.modal{
宽度：300px
高度：300px；
边框：1px实心#000
}
.modal__内部{
宽度：100px
高度：100px；
边框：1px纯红
}

父模态






内模态
X
如果你去掉了嵌套，让盒子成为背景封面的兄弟，那该怎么办？如果需要，可以添加一个新的父对象。将modal one z索引向上推怎么样？如果取消嵌套并使长方体成为背景封面的同级，该怎么办？如果你需要的话，可以添加一个新的父项。把模式一的z-索引往上推怎么样？啊，太好了，谢谢你！我看的是
e.currentTarget
不是
target
啊，太好了，谢谢！我在看
e.currentTarget
而不是
target
<div class="modal">
    <div class="modal__inner">
        <div class="modal_closebtn">X</div>
    </div>
</div>

document.querySelector(".modal").addEventListener("click", () => {
    this.toggleModal();
});

document.querySelector(".modal__inner").addEventListener("click", e => {
    e.stopPropagation();
});