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>

@NagaSaiA i'm testing this in IE11, will add this to my question — philr, May 03 '17 at 20:34
e doesn't exist in your click event... on("click", ".child", function(e) { alert("child"); e.stopPropagation(); }) — serverSentinel, May 03 '17 at 20:40
@serverSentinel yeah just fixed that thanks, that's not the problem though — philr, May 03 '17 at 20:41
This has been answered before; [**here**](http://stackoverflow.com/questions/26402033/missing-click-event-for-span-inside-button-element-on-firefox), [**here**](http://stackoverflow.com/questions/11069410/click-event-for-element-nested-within-a-button) and [**here**](http://stackoverflow.com/questions/14689879/span-inside-button-is-not-clickable-in-ff) to name a few. — hungerstar, May 03 '17 at 20:51
@hungerstar i specifically wrote in my question that i want to _avoid_ changing my button to a div — philr, May 03 '17 at 20:57
@philr you must not have read through those answers. They address the issues associated with attaching event handlers to elements nested in a `button` element, and, accordingly provide answers (including that it's not either possible in IE or in general a good idea). All of which are applicable to your question even with the requirement of, _"want to avoid changing my button to a div."_ — hungerstar, May 03 '17 at 21:05
Change your button tag into a div. It's not supported by [IE](http://stackoverflow.com/questions/14689879/span-inside-button-is-not-clickable-in-ff). — billybob, May 03 '17 at 21:10

score 9 · Answer 1 · answered May 04 '17 at 18:35

9

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/

answered May 04 '17 at 18:35

billybob

2,859
6
35
55

best answer, it will properly make any content inside a tag fire click events. – Genesis Dec 16 '19 at 22:27

score 3 · Answer 2 · answered May 03 '17 at 21:00

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.

score 2 · Answer 3 · answered Jul 12 '19 at 17:18

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/

click event on child inside button not firing in IE

3 Answers3