处理内部 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。
所以这就是我的问题的原因，但我不明白这种行为的原因。我在父 div 上使用子 div z-index: 2; 和 z-index: 1;，但它仍然没有帮助。

感谢您的关注！

Answer 1

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

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>