Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

Question

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10.

Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions?

javascript html css internet-explorer

Answer 1

Answer №1

According to the MDN documentation:

Caution: The usage of pointer-events in CSS for non-SVG elements is still in the experimental stage. Although initially included in the CSS3 UI draft specification, it has been postponed to CSS4 due to numerous unresolved issues.

Further information can be found here, essentially, utilizing pointer-events on a non-SVG (Scalable Vector Graphic) element is not considered standard practice.
Upon reviewing the browser support chart provided in the linked page (located approximately two-thirds of the way down), one would observe that IE does not support this feature on non-SVG elements.

After conducting some research, I stumbled upon this informative article which presents a method to replicate these functionalities using layers. Additionally, through this post's guidance, I discovered a helpful resource in this JS-bin that could prove beneficial...

Nevertheless, in browsers like IE (and Opera, as well as others to the best of my knowledge), you have the option to directly specify a cursor type for an element:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

The expected outcome should closely resemble that achieved with pointer-events: none;

Update:

If your aim is to disable click events specifically in IE, as shasi highlighted that other browsers already prevent such events, you can implement an event listener that manages the click event delegation.
Assuming you wish to target all a elements at present:

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

This setup should effectively block all click events on anchor elements.

Answer 2

According to the MDN documentation:

Caution: The usage of pointer-events in CSS for non-SVG elements is still in the experimental stage. Although initially included in the CSS3 UI draft specification, it has been postponed to CSS4 due to numerous unresolved issues.

Further information can be found here, essentially, utilizing pointer-events on a non-SVG (Scalable Vector Graphic) element is not considered standard practice.
Upon reviewing the browser support chart provided in the linked page (located approximately two-thirds of the way down), one would observe that IE does not support this feature on non-SVG elements.

After conducting some research, I stumbled upon this informative article which presents a method to replicate these functionalities using layers. Additionally, through this post's guidance, I discovered a helpful resource in this JS-bin that could prove beneficial...

Nevertheless, in browsers like IE (and Opera, as well as others to the best of my knowledge), you have the option to directly specify a cursor type for an element:

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

The expected outcome should closely resemble that achieved with pointer-events: none;

Update:

If your aim is to disable click events specifically in IE, as shasi highlighted that other browsers already prevent such events, you can implement an event listener that manages the click event delegation.
Assuming you wish to target all a elements at present:

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

This setup should effectively block all click events on anchor elements.

Answer 3

Answer №2

If you're dealing with IE10 glitches, there's a workaround that might help. Here's an example:

/* This CSS must target the element triggering the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* Make sure to set a color for IE10 compatibility */
    opacity: 0;
}

Answer 4

If you're dealing with IE10 glitches, there's a workaround that might help. Here's an example:

/* This CSS must target the element triggering the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* Make sure to set a color for IE10 compatibility */
    opacity: 0;
}

Answer 5

Answer №3

After reviewing the APIs, it seems that neither Rich Harris' Points.js nor Hands.js offer support for pointer-events: none.

As a solution, I have created a small script to fill this gap:

Pointer Events Polyfill.

Answer 6

After reviewing the APIs, it seems that neither Rich Harris' Points.js nor Hands.js offer support for pointer-events: none.

As a solution, I have created a small script to fill this gap:

Pointer Events Polyfill.

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

Answer №1

Answer №2

Answer №3

Similar questions

Ensuring validity using dynamic context objects within Joi

Using Pug/Jade, be sure to call a function during each loop iteration

Sending an AJAX request to a REST service in order to submit the information captured in an HTML form

Invoking Ajax Within Every Loop

There was an issue with the Google Maps embed API that resulted in an error with interpolation

Centered buttons placed right next to each other

In what way can I incorporate additional functions or multiple functions within an Express route to modify database information?

Reactivate IntelliJ IDEA's notification for running npm install even if you have previously selected "do not show again" option

Troubleshooting a live chat box for CSS alignment issues

Tips for transferring large data without a page redirect using jQuery's post method:

Validation within nested Joi schemas

Exploring the functionalities of AngularJS' ng-options when working with select elements

How can I resolve the Vue warning about an unknown custom element <password-input>?

Ways to reach the standard look

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Tips for retrieving javascript-generated HTML content

Is it possible to resend an AJAX request using a hyperlink?

Guide on how to retrieve Twitter Username and Profile Photo through the Twit NPM Package

Trigger an alert when a button is clicked and redirect the user to an newly opened tab

Error in CSS Header - Position Shifts when Hovered Over