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!

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!

• javascript
• css
• internet-explorer-11
• pointer-events

• Should you be using the touch-action rule (msdn.microsoft.com/en-us/library/ie/…) instead? – Lance Leonard Commented Nov 3, 2014 at 16:34
• not sure, this is on a laptop without a touch screen – wayofthefuture Commented Nov 3, 2014 at 18:47
• 1 I have this issue is well. – a2f0 Commented Aug 19, 2015 at 12:51

4 Answers 4

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.

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.

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

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