IE 11 Pointer Events Override
Solution 1
For anyone that finds this - IE11 ignores the pointer-events property on inline items such as tags. Simply switch the display property to anything else for it to function correctly.
Solution 2
I had the opposite problem in IE11, I was setting pointer-events: none
on a parent element, but a link inside that element was still responding to clicks! As it turned out, a span inside the link had position: relative
, which made it ignore the parent's pointer-events property.
Solution 3
I believe this will fix your problem:
https://coderwall.com/p/s8pjpg/reseting-pointer-events-on-ie11
So, for your code:
.divstyle {
pointer-events: none;
}
.buttonstyle {
pointer-events: auto;
position: relative;
}
Solution 4
perfectly works using inline block .. display: inline-block;
even by class name works well
a.pa-description {
pointer-events: none;
cursor: default;
display: inline-block;
color: gray;
}
wayofthefuture
Updated on July 11, 2022Comments
-
wayofthefuture almost 2 years
I am trying to override the pointer-events property for a containing div. It works in everything so far except IE 11. Supposedly, the pointer-events property was added to IE 11. For some reason, it won't override though.
.divstyle { pointer-events: none; } .buttonstyle { pointer-events: auto; } <div class="divstyle"> <table> <tr><td> <input type="button" class="buttonstyle" value="test"> </td></tr> <tr><td> <!-- A BUNCH OF CONTENT THAT I DON'T WANT TO HAVE POINTER EVENTS --> </td></tr> <tr><td> <!-- AND ON AND ON --> </td></tr> </table> </div>
The entire div doesn't allow pointer events, including the button. I would think since the div doesn't have the events at all, IE is supporting the property pointer-events, but when I explicitly set the child to have the events, it won't allow it for some reason. Thank you for your help!
-
Yaocl about 5 yearsChange display to inline-block fixed the problem.
-
Yuriy Polezhayev over 4 yearsThanks! Fixed my particular issue