CSS pointer-events IE10 and IE11 old versions

Question

#values43011009create {
    pointer-events: none;
    background-color: #f9f9f9;
}

This code is not working in IE 10, but is working fine in IE 11 and above.

I need a fix for lower versions of IE as well. Your help is appreciated.

Answer 1

An alternative solution for this would be adding a Psuedo ::after element on top of the link to act as cover preventing it being clicked:

.yourlink {
    position: relative;
    z-index: -1
}

.yourlink::after {
    content: ' ';
    background-color: #fff;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    z-index: 250; 
}

If you want to do this only on IE browsers and not Firefox or Chrome, then you can wrap all of this in a media query only targeting IE:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .yourlink {
        position: relative;
        z-index: -1
    }

    .yourlink::after {
        content: ' ';
        background-color: #fff;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        z-index: 250; 
    }
}

Here is an example fiddle of the solution: https://jsfiddle.net/Ly06krt3/23/

Answer 2

To prevent the click event, You can refer an example below.

var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

Reference:

“pointer-events: none” does not work in IE9 and IE10