1

I want to make a script that makes tag unclickable using JavaScript. I also want to use a function when you go over an tag with the mouse that is gives an alert box that say’s its unclickable. I’ve been searching the web after examples of this but I can’t find anything with a separate JavaScript Something like this but not in the link it salve so I can use it on more than one link If someone could help I would be so thankful

< a href="demo.html" onclick="return false;">demo

code
  • 23
  • 4

2 Answers2

2

Add an onlick with return false.

<a  href="http://www.google.com" onclick="return false" onmouseover="alert('unclickable')">Link</a>

EDIT (see comments): 1. Find your element. 2. Set the onlick attribute.

document.getElementById("link1").onclick = function() { 
            return false;
        };
<a id="link1" href="http://www.google.com" >Link</a>
Christoph
  • 1,954
  • 1
  • 20
  • 31
1

If you need to do it on a script instead of a unique element, you can do something like this:

    var a_nodes_list = document.getElementsByTagName("a");
    for(var i = 0; i < a_nodes_list .length; i++) { 
        a_nodes_list[i].onclick = function() { return false; };
    }


var a_nodes_list = document.getElementsByTagName("a");
for(var i = 0; i < a_nodes_list .length; i++) { 
  a_nodes_list[i].onclick = function() { return false; };
}
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>

With document.getElementsByTagName("a") recover every anchor tag on the document. So just iterate through nodes and apply a handler for the onclick event to return false on every a node.

About the second request of your question related to use an alert box to say is unclickable we just need to modify our litte script:

        var a_nodes_list = document.getElementsByTagName("a");
        for(var i = 0; i < a_nodes_list.length; i++) { 
            a_nodes_list[i].onclick = function() { return false; };
            a_nodes_list[i].onmouseover = function() { alert("UNCLICKABLE"); };
        }


var a_nodes_list = document.getElementsByTagName("a");
for(var i = 0; i < a_nodes_list.length; i++) { 
  a_nodes_list[i].onclick = function() { return false; };
  a_nodes_list[i].onmouseover = function() { alert("UNCLICKABLE"); };
}
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>
<a href="http://google.es">Link</a>

We just simply add alert("UNCLICKABLE"); on the hover event of every anchor element.

frikinside
  • 1,234
  • 1
  • 9
  • 19
  • 2
    Why would you re-retrieve all the `a` elements each time through the loop? –  Dec 09 '15 at 10:30
  • @torazaburo Was extremly inneficient, I think has better understunding reading the code in that inneficient way, but you are right, let's do it better – frikinside Dec 09 '15 at 10:35
  • @frikinside Thanks !!!! but I just tested the script but it doesn’t seem to work ?? – code Dec 09 '15 at 10:44
  • @vde Maybe I don't get you question correctly? There's two code snippet in this answer. The first one, show 10 links with the executed script. That 10 links don't go anywhere because of the `return false`. The second one, has the alert on hover requested. What problem are you facing? Are the snipets working for you? – frikinside Dec 09 '15 at 11:26
  • @frikinside Thanks for the script if I run it in my html file between – code Dec 09 '15 at 12:08
  • @code well It should work in theory. What might be happen is that the javascript file loads and execute before the a nodes are attached to the DOM. There's a few ways to solve this, use that code as handler for document load event or link the script at the bottom of the dom. Take a look to this links: http://stackoverflow.com/a/8716680/3382947 and http://stackoverflow.com/a/8996894/3382947 – frikinside Dec 10 '15 at 07:47