title: Dealing with click event handler on inner div and outer div
body: <p>I've got modal window: parent <code>div</code> (wrapper with dark transparent background) and child <code>div</code> (with buttons, inputs and text). Both of them are fixed positioning.<br>
  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).<br><br>
  <strong>Here is my simple JS code:</strong></p>
  <pre><code>function doModalClose() {
     modalWrapper.remove();
  }
  
  closeBtn.addEventListener('click', doModalClose);
  modalWrapper.addEventListener('click', doModalClose);
  </code></pre>
  <p><strong>And html markup:</strong></p>
  <pre><code>&lt;div class=&quot;modal-wrapper&quot;&gt;
      &lt;div class=&quot;modal-window&quot;&gt;
          &lt;div class=&quot;btn-wrapper&quot;&gt;&lt;span class=&quot;close-btn&quot;&gt;&lt;/span&gt;&lt;/div&gt;
          other modal elements...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The main question is that when I click on parent <code>div</code> it works correctly, and as when I click on <code>.close-btn</code>. But if I clicked on child <code>div</code> (.modal-window) it closes whole modal too, which incorrect!<br><br>
  I make a simple <code>alert();</code> check: when I click on parent one it should say <code>Modal Wrapper</code> and when I click on child one it should say <code>Modal Window</code>. <br>
  And when I click on child window it calls two <code>alert();</code> functions: first is child's <code>Modal Window</code> and after that parent's <code>Modal Wrapper</code>.<br>
  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 <code>z-index: 2;</code> and <code>z-index: 1;</code> on parent div, but it still doesn't help. <br><br>
  Thank you for your attention!</p>