Enabling and Disabling hyperlinks in JavaScript

Question

I'm working on a project where I need to temporarily disable all hyperlinks, and then enable them again once my pop-up div is gone. I am able to successfully disable all the links using this function I wrote:

    function disableHyperlinks(){
        link_targets = Array();
        var anchors = document.getElementsByTagName("a");
        for(var i = 0; i < anchors.length; i++){
            link_targets.push(anchors[i].href);
            anchors[i].href= "#";
        }
     }

Which also saves all the URLs so it can put them back later using this function:

    function enableHyperlinks(){
        var anchors = document.getElementsByTagName("a");
        for(var i = 0; i < anchors.length; i++){
            anchors[i].href= link_targets[i];
        }
    }

The above code seems to work just fine, it removes all the links, and then puts them all back without any issues, however the problem is that if I run the 'enable' code after a link is clicked, its almost as if the javascript is setting the link back to the original destination and then registering the click. So despite being 'disabled' in this fashion, the link still ends up leaving the page.

The problem is demonstrated here

Click the red "L" with the white background to enable the javascript I made for selection, you'll notice anything you bring your mouse over will get a blue dashed border, I need to be able to "select" parts of the web page without redirecting to another page if a link is also clicked.. any idea how I could go about doing this properly?

(Please note I am trying to avoid JQuery)

Alright, I caved, I'm using JQuery now. Was able to solve this issue in Chrome using preventDefault(); but that doesn't fix the problem in Firefox. — Patrick T Nelson
– Patrick T Nelson, Commented Jul 11, 2012 at 20:34

epascarello · Accepted Answer · 2012-07-10 14:53:20Z

2

Work on the onClick listener:

var areEnabled = false;
function toggleLinks(){
    var anchors = document.getElementsByTagName('a');
    for(var i=0; i < anchors.length; i++)
        anchors[i].onclick = (areEnabled) ? null : function(e){ return false };
    areEnabled = !areEnabled;
};

edited Jul 10, 2012 at 14:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

answered Jul 10, 2012 at 14:40

bokonic

1,77110 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrick T Nelson Over a year ago

I wasn't aware the <a> tag had that property, thanks! However, using that method did not fix the problem.

epascarello Over a year ago

should be onclick, not onClick

Patrick T Nelson Over a year ago

Still doesn't seem to be working, I think the issue might not be how exactly I'm disabling the links. When I hover over the "disabled" link it does indeed show that it goes to "#", but then when I click it, it goes to where it was pointing originally instead of "#". o_O Link to JS: fullofepicwin.com/likeler/StackOverflowCopy/imsafe/likeler.js

Oleg V. Volkov · Accepted Answer · 2012-07-10 15:00:33Z

0

Instead of searching for many links and disabling them (which, BTW, won't help you against other clickable objects), you can create another invisible div, just below your popup on z-index that would cover entire page and catch all clicks instead of elements underneath. You can even make it semi-transparent instead of completely invisible for visual effect alerting user that "lower-level" is disabled.

answered Jul 10, 2012 at 15:00

Oleg V. Volkov

22.6k4 gold badges49 silver badges68 bronze badges

3 Comments

Patrick T Nelson Over a year ago

Please look at the demo site I linked to, I need to be able to select items on the page, and click them, without clicking the links. I'm not worried about clickable items behind the popup div.

Oleg V. Volkov Over a year ago

@PatrickTNelson, indeed. How about then same solution with covering everything in div, assigning it the handler that would determine element under mouse and either let click even fall through or cancel it?

Patrick T Nelson Over a year ago

Sounds good, but I'm somewhat of a novice when it comes to web dev, I'd have no clue how to implement that. Have a link to a tutorial of some form that could be helpful?

Patrick T Nelson · Accepted Answer · 2012-09-30 13:16:15Z

I was finally able to solve my own problem by manipulating the onclick property of each hyperlink, then setting it back to what it was previously. The only problem with bokonic's response was that the onclick property was set to null to "re-enable" the link, which would then disable any javascript functionality the link had previously.

var onclickEvents;

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

function enableHyperlinks(){
    var anchors = document.getElementsByTagName("a");
    for(var i = 0; i < anchors.length; i++){
        anchors[i].onclick = onclickEvents[i];
    }
}

Collectives™ on Stack Overflow

Enabling and Disabling hyperlinks in JavaScript

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related