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

Question

我有模态window：parent div（深色反式包装parent背景）和child div（带有按钮、输入和文本）。两者都是固定定位。
在 JavaScript 我做简单的代码：如果我点击 parent fixed div (.modal-wrapper) - 它必须关闭（删除）整个模式 window。如果我点击关闭按钮（模态 window 角落的 '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>

主要问题是，当我点击 parent div 时它工作正常，当我点击 .close-btn 时也是如此。但是如果我点击 child div (.modal-window) 它也会关闭整个模式，这是不正确的！

我做了一个简单的 alert(); 检查：当我点击 parent 时，它应该显示 Modal Wrapper，当我点击 child 时，它应该显示 Modal Window。
当我点击 child window 时，它会调用两个 alert(); 函数：第一个是 child 的 Modal Window，然后是 parent 的 Modal Wrapper.
所以这就是我的问题的原因，但我不明白这种行为的原因。我在childdivz-index: 2;和parentdiv上使用z-index: 1;，但仍然没有帮助。

感谢您的关注！

Answer 1

发生这种情况是因为一个在另一个里面，如果您单击内部 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>

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

Dealing with click event handler on inner div and outer div

html

javascript

modal-dialog

css-position