处理内部 div 和外部 div 上的单击事件处理程序

Question

我有模态窗口：父div(带有深色透明背景的包装器)和子div(带有按钮、输入和文本)。两者都是固定定位。
在JavaScript中，我做简单的代码：如果我点击父固定div(.modal-wrapper) - 它必须关闭(删除)整个模态窗口。如果我单击关闭按钮(模态窗口一角的"X"按钮)，结果相同。

这是我的简单JS代码：

function doModalClose() {
modalWrapper.remove();
}
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);

和 html 标记：

<div class="modal-wrapper">
<div class="modal-window">
<div class="btn-wrapper"><span class="close-btn"></span></div>
other modal elements...
</div>
</div>

主要问题是，当我单击父div时，它可以正常工作，就像我单击时一样.close-btn.但是如果我点击子div(.modal-window)，它也关闭了整个模态，这是不正确的！

我做了一个简单的alert();检查：当我单击父项时，它应该说Modal Wrapper，当我单击子项时，它应该说Modal Window。
当我单击子窗口时，它会调用两个alert();函数：第一个是孩子的Modal Window，然后是父Modal Wrapper。
这就是我问题的原因，但我不明白这种行为的原因。我在子divz-index: 2;上使用，在父div 上使用z-index: 1;，但它仍然没有帮助。

感谢您的关注！

Answer 1

发生这种情况是因为一个在另一个内部，如果您单击内部div，您也会单击外部div，因为内部在外部内部。您需要一个额外的处理程序，仅用于.modal-window和使用event.stopPropagation()。运行此代码片段并自行查看。

function doModalClose() {
modalWrapper.remove();
}
var closeBtn = document.getElementsByClassName('close-btn')[0]
var modalWrapper = document.getElementsByClassName('modal-wrapper')[0]
var modalWindow = document.getElementsByClassName('modal-window')[0]
var button1 = document.getElementsByClassName('button1')[0]
var button2 = document.getElementsByClassName('button2')[0]
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);
modalWindow.addEventListener('click', function (event) {
event.stopPropagation()
})
button1.addEventListener('click', function (event) {
alert('button1')
})
button2.addEventListener('click', function (event) {
alert('button2')
})

div {margin: 5px; padding: 5px}
.modal-wrapper {border: 2px solid red}
.modal-window {border: 2px solid blue}
.btn-wrapper, .btn {border: 2px solid green}

<div class="modal-wrapper">modal-wrapper
<div class="modal-window">modal-window
<div class="btn-wrapper"><span class="close-btn">button</span></div>
<a class="btn button1">Button1</a>
<a class="btn button2">Button2</a>
</div>
</div>