IE 11 Event Switching

Question

I am trying to override the pointer-events property for the containing div. It works in everything except IE 11. Presumably, the event-pointer property was added in IE 11. For some reason, it will not be canceled.

.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 does not allow pointer events, including a button. I would think that since the div has no events at all, IE supports property event pointers, but when I explicitly set a child for events, it will not allow this for some reason. Thanks for the help!

Answer 1

I had the opposite problem in IE11, I set pointer-events: none to the parent element, but the link inside that element still responded to clicks! As it turned out, the interval inside the link had position: relative , which caused it to ignore the property of the parent event pointer.

Answer 2

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; }