title: How to pass or bubble a click event to another layer?
body: <p>I am working on a project which I need to edit and do some actions with elements. I have some DIVs as elements inside a group DIV and another DIV overlay them. My problem is that when I click on overlay and do some actions I want any element below overlay also be clicked.</p>
  
  <p>I tried bubbling but since overlay element is not in the same div it does not work for me. I also tried manually trigger the event but since I don't know which element is below where it's been clicked, cant get expected result.
  I also found this article <a href="https://stackoverflow.com/questions/9990536/how-to-pass-click-events-from-one-div-to-another">How to pass click events from one div to another?</a> similar to my problem but not exactly because I also need to do some actions with overlay layer on click.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#group').on('mousedown', function(evt) {
      // Do some action
      console.log('group');
    });
    $('#overlay').on('mousedown', function(evt) {
      // Do some action
      console.log('cover');
    });
    $('.item').on('mousedown', function(evt) {
      // Do some action
      console.log('item-' + $(this).html());
      evt.stopPropagation()
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#group {
   width: 400px;
   height: 400px;
   position: relative;
   background-color: #eee;
  }
  
  #overlay {
   position: absolute;
   top: 50px;
   left: 50px;
   width: 250px;
   height: 250px;
   background-color: #000;
   opacity: 0.2;
   z-index: 10;
  }
  
  .item {
   position: absolute;
   width: 150px;
   height: 150px;
   font-size: 4rem;
   line-height: 140px;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="overlay"&gt;&lt;/div&gt;
  &lt;div id="group"&gt;
   &lt;div class="item" style="top: 60px; left: 60px; background-color: #fcc;"&gt;A&lt;/div&gt;
   &lt;div class="item" style="top: 170px; left: 170px; background-color: #cfc;"&gt;B&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I want to when I click on overlay, if any 'item' div exist below overlay also be clicked.</strong><br>
  I used jquery but can accept any solution with raw JavaScript.</p>