JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent-container">
  <div id="child-container">
    this area has a click listener
  </div>
</div>
<div id="click-info">No 'click' event yet.</div>
<div class="btn" id="trigger-parent-btn">
  trigger 'click' event on parent container<br>
  [ does not work ]
</div>
<div class="btn" id="trigger-child-btn">
  trigger 'click' event directly on child container
</div>

CSS

#child-container { border: 1px solid #eee; background: #2288bb; cursor: default; color: #f2f2f2; line-height: 80px; font-size: .8rem; }
#child-container:hover { opacity: .9; }
.btn { border: 1px solid #eee; background: #f8f8f8; color: #2288bb; line-height: 48px; min-height: 48px; cursor: pointer; }
#child-container, .btn, #click-info { padding: 0 8px; width: 180px; text-align: center; font-family: sans-serif; }
#click-info { margin: 16px 0; font-size: .8rem; line-height: 28px; color: #666; }

JavaScript

var parent = document.querySelector('#parent-container'),
		child = document.querySelector('#child-container'),
    info = document.querySelector('#click-info'),
    triggerParent = document.querySelector('#trigger-parent-btn'),
    triggerChild = document.querySelector('#trigger-child-btn');

// clicked on the parent
child.addEventListener('click', function(e) {
	showClickInfo(e.clientX, e.clientY);
}, false);

// clicked the trigger parent button
triggerParent.addEventListener('click', function(e) {
	
  // trigger click event on parent container
  parent.dispatchEvent(new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: e.clientX,
    clientY: e.clientY
  }));
});

// clicked the trigger child button
triggerChild.addEventListener('click', function(e) {
	
  // trigger click event on child container
  child.dispatchEvent(new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: e.clientX,
    clientY: e.clientY
  }));
});

function showClickInfo(x, y) {
	info.innerHTML = 'Clicked at ' + x + ':' + y;
}