Click event on child button inside not firing in IE
I have a button with a fly inside. I have a button click event and I also have a gap click event, but in IE11 the gap click event doesn't fire (works in Chrome / Firefox). Is there a workaround to this without going from button to div?
I know changing my button to a div will work (as answered in other questions), I want to avoid 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>
source to share
I know the question mentions that he wants to avoid being used div
as a button. But this cannot be achieved IE
without running dirty code. The best solution would be to change button
to div
.
Here's the updated fiddle: https://jsfiddle.net/ovhhdab5/
source to share
Had the same problem on one of my sites with IE and buttons. And I had a really long night because we found out right after life ..: D When you disable the parent click event, you will see nothing happens and the child click event is never fired when the button is pressed. This is a common problem with IE.
Possible solution: To avoid / solve the problem: just add some javascript / jquery lines to find out in which coordinates the button was clicked and when there was / is a child then fire the child event.
source to share
You can 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 the click events and send them to the correct child.
Be careful, only in IE this will cause click events to be dispatched to both the child and parent. While this was not a problem in my situation, it looks like it will be in your situation, so you will need to find a way to stop the event from. bubbles and b. sent to other listeners on the parent.
source to share