在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.

Answer 3

You may be able to try something like this:

parent.addEventListener("click", function(e) {
     var x = e.clientX, y = e.clientY,
     elementMouseIsOver = document.elementFromPoint(x, y);

     //Only run this on IE
     if (/MSIE|Trident/.test(window.navigator.userAgent);) {
         elementMouseIsOver.click()
     }
})

This will capture click events, and dispatch them the the correct child.

Be warned though: On IE only, this will lead to click events being dispatched to both the child and the parent. While this was not a problem in my situation, it appears like it will be in yours, so you will need to find a way to stop the event from a. bubbling and b. being dispatched to other listeners on the parent.

https://jsfiddle.net/zLwagcmv/16/