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.

Answer 1

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

• css 'pointer-events' property alternative for IE
• How to make Internet Explorer emulate pointer-events:none?

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