处理内部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

z-index: 2;

上使用，在父 div 上使用

z-index: 1;

，但仍然没有帮助。

感谢您的关注！

Answer 1

发生这种情况是因为一个

div

位于另一个

div

之内，这意味着如果您单击内部 div，您也会单击外部 div，因为内部 div 位于外部 div 内部。要解决这个问题，您需要一个额外的处理程序仅用于外部 div 并在其中使用

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>