JSFiddle - React, Tailwind, and code Playground

HTML

<button class="parent">
  <span class="child">
  
  </span>
</button>

CSS

.parent {
  width: 200px;
  height: 200px;
  background-color: cornflowerblue;
}

.child {
  width: 100px;
  height: 100px;
  background-color: white;
  display: none;
}

.parent:hover .child {
  display: block;
}

JavaScript

$(document)
		.on("click", ".child", function() { alert("child");})
		.on("click", ".parent", function(e) {if (e.target === parent) {alert("parent")}})

var parent = document.querySelector(".parent")
var isIE = /MSIE|Trident/.test(window.navigator.userAgent);
    
 
parent.addEventListener("click", function(e) {
     var x = e.clientX, y = e.clientY,
     elementMouseIsOver = document.elementFromPoint(x, y);

      if (isIE) {
       elementMouseIsOver.click()
      }
})