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.
/
$(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=".1.1/jquery.min.js"></script>
<button class="parent">
<span class="child"></span>
</button>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/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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="parent">
<span class="child"></span>
</button>- IE version on which you are trying? – Naga Sai A Commented May 3, 2017 at 20:33
- @NagaSaiA i'm testing this in IE11, will add this to my question – philr Commented May 3, 2017 at 20:34
- e doesn't exist in your click event... on("click", ".child", function(e) { alert("child"); e.stopPropagation(); }) – serverSentinel Commented May 3, 2017 at 20:40
- @serverSentinel yeah just fixed that thanks, that's not the problem though – philr Commented May 3, 2017 at 20:41
- 1 Change your button tag into a div. It's not supported by IE. – billybob Commented May 3, 2017 at 21:10
3 Answers
Reset to default 9I 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/ovhhdab5/
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.
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/zLwagcmv/16/