'Pointer-events: none' not working with IE

Question

0.00/5 (No votes)

See more:

, +

Hi,

I have an anchor element placed on my HTML page, which is under some conditional statement:

@if(someCondition)
{

HTML

<span class="iop-plan"><a id="IOP-InPlan" class="inactiveLink" >IOP - In Plan</a></span>

}

CSS:
a.inactiveLink {
pointer-events: none;
cursor: default;
color: #333333;
}

My aim is to make the anchor link disabled/non-clickable if the condition satisfies. Therefore I have placed the pointer-events: none in CSS. However, it doesn't seem to work with Internet Explorer. It is working with all the other browsers (Chrome, Mozilla).

Kindly help.

What I have tried:

After reading on internet, I tried things like putting the anchor element inside SVG tag, as people have suggested that IE does identify pointer-events: none with SVG. However, it didnt work.

Posted 16-May-16 20:50pm

NJ44

Updated 24-Jan-20 8:07am

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2016-05-16T23:48:00

Solution 1

The pointer-events CSS property not supported in IE before version 11...

Posted 16-May-16 23:48pm

Kornfeld Eliyahu Peter

Comments

NJ44 17-May-16 5:53am

Yes I figured out that. Then what is the other approach through which we can make the anchor link disabled/non-clickable?

NJ44 17-May-16 7:30am

I am using IE version 11 here.

Member 12546977 · Answer 2 · 2016-12-28T00:58:00

Solution 2

Instead of doing it using css , try to set attr/prop using jquery
If you are using jQuery < 1.6, do this:

$('#deleteclientajaxformlink').attr("disabled", 'disabled');
If you are using jQuery 1.6+:

$('#deleteclientajaxformlink').prop("disabled", true);

Posted 28-Dec-16 0:58am

Member 12546977

Member 14725965 · Answer 3 · 2020-01-24T08:09:00

Solution 3

I was facing exactly same problem. By adding css property 'display: block' to class, it worked on IE 11. I'm just using that now along with 'pointer-events: none'.

Posted 24-Jan-20 8:09am

Member 14725965