pointer-events: none not working in IE

Question

I'm trying to disable the hyperlinks in my SharePoint 2013 list edit page. I used a content editor webpart and put pointer-events : none. It works fine on Google Chrome but doesn't work in IE . Is there any alternative to this? I just want the CSS alternative. My IE is version 10.

Is that a typo or did you really type `pointer-event: none` in your CSS? The property is `pointer-events` with an **S** at the end — Bojangles, Mar 09 '16 at 07:24
@Bojangles Correct spelled in title, typo fixed now in question — Asons, Mar 09 '16 at 07:30
Possible duplicate of [css 'pointer-events' property alternative for IE](http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie) — Asons, Mar 09 '16 at 13:04

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

pointer-events is not supported in IE 10 and there is no other similar CSS property.

Either a change in your markup or using a script is needed to solve that.

Update

Here is a sample using script.

I also styled the link so one can't see them as links, which actually could be used alone, based on if someone randomly clicks in the text and accidentally hits one, it would still be okay.

Array.prototype.slice.call(document.querySelectorAll("a")).forEach(function(link) {
  link.addEventListener("click", function(e) {  
    e.preventDefault();
  });
});

a {
  cursor: text;
  text-decoration: none;
  color: inherit;
}

Some text with <a href="http://stackoverflow.com"> a link </a> to click on

Update 2

Here is actually 2 posts that has a several ways of how this might be done (all script though but one),

where this answer doesn't use script.

Update 3 based on comment

To use the attribute disabled='disabled' one either need to add it server side so the anchor looks like this, <a href="link" disabled="disabled">Link</a>, or client side with a script like this

Array.prototype.slice.call(document.querySelectorAll("a")).forEach(function(link) {

  link.setAttribute('disabled', 'disabled');

});

/*
a {
  cursor: text;
  text-decoration: none;
  color: inherit;
}
*/

Some text with <a href="http://stackoverflow.com"> a link </a> to click on

edited May 23 '17 at 12:17

Community

1
1

answered Mar 09 '16 at 07:25

Asons

84,923
12
110
165

do you know any script for this @LGSon – Revenant_01 Mar 09 '16 at 07:38
@Revenant_01 Updated my answer with a sample – Asons Mar 09 '16 at 07:41
@Revenant_01 Made a small update again ... and now you can both accept and vote on answers :) – Asons Mar 09 '16 at 07:53
i tried using that script in my content editor webpart , but its not working – Revenant_01 Mar 09 '16 at 08:08
@Revenant_01 Make sure the script runs in the end of your body or in the onload/dom ready event. – Asons Mar 09 '16 at 08:13
yes . it loads in the pageload . u r sure there is no way we can not do it with CSS . – Revenant_01 Mar 09 '16 at 08:19
@Revenant_01 As we speak I'm testing another way. Will update my answer again soon if it works, or comment if not. – Asons Mar 09 '16 at 08:29
@Revenant_01 Didn't work what I tried, updated my answer with a couple of links, all (but one) uses script though. – Asons Mar 09 '16 at 08:47
i think [disabled] should work here . but my question here is how i can use it with the class . the class name is '.ms-formbody' . and i tried doing .ms-formbody[disabled]{}; but it doesnt seem to work. – Revenant_01 Mar 10 '16 at 05:26
@Revenant_01 Added a 3:rd update for you, explaining that. – Asons Mar 10 '16 at 07:34

pointer-events: none not working in IE

1 Answers1