6

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>

8
  • IE version on which you are trying?
    – Naga Sai A
    May 3, 2017 at 20:33
  • @NagaSaiA i'm testing this in IE11, will add this to my question
    – philr
    May 3, 2017 at 20:34
  • e doesn't exist in your click event... on("click", ".child", function(e) { alert("child"); e.stopPropagation(); }) May 3, 2017 at 20:40
  • @serverSentinel yeah just fixed that thanks, that's not the problem though
    – philr
    May 3, 2017 at 20:41
  • 1
    Change your button tag into a div. It's not supported by IE.
    – billybob
    May 3, 2017 at 21:10

3 Answers 3

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/

1
  • best answer, it will properly make any content inside a <button></button> tag fire click events.
    – Genesis
    Dec 16, 2019 at 22:27
3

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.

2

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.