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

Question

I've got modal window: parent div (wrapper with dark transparent background) and child div (with buttons, inputs and text). Both of them are fixed positioning.
In JavaScript I do simple code: If I click on parent fixed div (.modal-wrapper) - it must close (remove) whole modal window. And same result if I click on close button ('X' button in the corner of modal window).

Here is my simple JS code:

function doModalClose() {
   modalWrapper.remove();
}

closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);

And html markup:

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

The main question is that when I click on parent div it works correctly, and as when I click on .close-btn . But if I clicked on child div (.modal-window) it closes whole modal too, which incorrect!

I make a simple alert(); check: when I click on parent one it should say Modal Wrapper and when I click on child one it should say Modal Window .
And when I click on child window it calls two alert(); functions: first is child's Modal Window and after that parent's Modal Wrapper .
So that's the reason of my issue, but I don't understand the reason of that kind of behavior. I use on child div z-index: 2;and z-index: 1; on parent div, but it still doesn't help.

Thank you for your attention!

Answer 1

This happens because one is inside another one, if you click the inner div you also click the outer one because the inner is inside the outer one. You need an extra handler just for .modal-window and to use event.stopPropagation() . Run this code snippet and see by yourself.

 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>