Q:

How to pass or bubble a click event to another layer?

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.
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 How to pass click events from one div to another? similar to my problem but not exactly because I also need to do some actions with overlay layer on click.

$(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()
  });
});
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="group">
 <div class="item" style="top: 60px; left: 60px; background-color: #fcc;">A</div>
 <div class="item" style="top: 170px; left: 170px; background-color: #cfc;">B</div>
</div>

I want to when I click on overlay, if any 'item' div exist below overlay also be clicked.
I used jquery but can accept any solution with raw JavaScript.

A:

I found an answer with document.elementFromPoint which works fine and all modern browsers support.
When overlay div has been clicked, I hide Overlay and check which element is under overlay on mouse event position.
I used MouseEvent.clientX , MouseEvent.clientY with document.elementFromPoint to determine the element.

$(document).ready(function(){
 $('#group').on('click', function(evt){
  console.log('group');
 });
 $('#overlay').on('click', function(evt){
  console.log('cover');
  $(this).css('display', 'none');
  var element = document.elementFromPoint(evt.clientX, evt.clientY);
  $(this).css('display', 'block');
  $(element).trigger('click');
 });
 $('.item').on('click', function(evt){
  console.log('item-' + $(this).html());
  evt.stopPropagation()
 });
});
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="group">
 <div class="item" style="top: 60px; left: 60px; background-color: #fcc;">A</div>
 <div class="item" style="top: 170px; left: 170px; background-color: #cfc; transform: rotateZ(45deg);">B</div>
</div>

