4

Possible Duplicate:
Override default behaviour for link ('a') objects in Javascript

What is the best way for making entire page links in home page read only (non clickable like href=# or href="javascript:void()" based on a user action.

I wanted to use only Javascript and CSS to achieve this.

Community
  • 1
  • 1
Codemator
  • 513
  • 1
  • 10
  • 19
  • 2
    For short amount of time until JS executes links will be clickable. Also for browsers with JS disabled. – pero Oct 05 '12 at 10:52

7 Answers7

9

Only css

a {
    pointer-events: none;
    cursor: default;
}
Caelea
  • 2,318
  • 15
  • 22
  • Not guaranteed quite yet, no: https://developer.mozilla.org/en-US/docs/CSS/pointer-events http://caniuse.com/pointer-events – jonvuri Oct 05 '12 at 10:54
  • Simple and Best Solution.. I checked it.. working fine.. Thanks a lot – Codemator Oct 05 '12 at 10:55
  • @Renjith please never forget the browser compatibility, check on more than one browser (this doesn't work for IE9 which probably isn't old enough yet to disregard) – Kos Oct 05 '12 at 11:00
  • It is working in Firefox and chrome.. In IE it doesn't works.. Need to think about a generic solution which is javascript based – Codemator Oct 05 '12 at 11:06
  • 1
    You could always add a Modernizr fallback if you want IE support. – Nate Higgins Oct 05 '12 at 11:11
5

try

with jquery

$("a").click(function() { return false; });

vanilla js

        var elements = document.getElementsByTagName("a");
        for (var i = 0; i < elements.length; i++) {
            elements[i].onclick = function () { return false; }
        }
Veli Gebrev
  • 2,481
  • 4
  • 31
  • 48
2

Something like this should work

var anchors = document.getElementsByTagName('a');

for(var i=0,len=anchors.length;i<len;i++){
   anchors[i].href = '#';
}
Jashwant
  • 28,410
  • 16
  • 70
  • 105
2

Here is a wonderful solution by CMS, by using event delegation technique.

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};

Demo

Community
  • 1
  • 1
Starx
  • 77,474
  • 47
  • 185
  • 261
0

Start with:

links = document.getElementsByTagName('a')

Then:

for (var i=0; i<links.length; ++i) {
    // disable a link, for instance like this
    links[i].href = "javascript:void()"
}
Kos
  • 70,399
  • 25
  • 169
  • 233
0

jQuery

$("a").on("click",function(e) { e.preventDefault();   
   // anything you want to do on click
});
GajendraSinghParihar
  • 9,051
  • 11
  • 36
  • 64
0

How about using replaceChild - it will work in all browsers since NS6/IE6/Chrome1/FX1 or so

DEMO

Plain JS:

window.onload=function() {
  var anchors = document.getElementsByTagName('a');

  for(var i=anchors.length-1;i>=0;i--){
    var span = document.createElement("span");
    span.innerHTML=anchors[i].innerHTML;
    anchors[i].parentNode.replaceChild(span,anchors[i])
    span=null;
  }
}

Or my first suggestion in a comment on the page:

window.onload=function() {
  var anchors = document.getElementsByTagName('a');
  for(var i=anchors.length-1;i>=0;i--){
    anchors[i].onclick=function() { return false }
  }
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236