click event on child inside button not firing in IE

Question

I have a button with a span inside it. I have a click event on the button and I also have a click event on the span, but in IE11 the span click event is not firing (works in Chrome/Firefox). Is there any workaround to this without changing from a button to a div?

I know that changing my button to a div will work (as answered in other questions), I want to avoid doing that.

https://jsfiddle.net/asjo8ox0/2/

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Answer 1

I know that is mentioned in the question that he wants to avoid using a div as a button. But it's not possible to achieve it in IE without doing some dirty code. The best solution would be to change the button into a div.

Here's the updated fiddle: https://jsfiddle.net/ovhhdab5/

Answer 2

Had the same problem on one of my websites with IE and Buttons.. And i had a really long night because we found out directly after go-life.. :D When you disable the parent-click event you'll see that nothing happens and the child-click event is never fired when you click on the button. It's a general problem with the IE.

A possible solution: To avoid/solve the problem: Just add some lines of javascript/jquery to find out on what coordinates the button was clicked and when there was/is the child then fire the child-event instead.