CODEWITHSUNDEEP
javascripthtmlhyperlinkhref
Patrick T Nelson
Patrick T Nelson

Reputation: 1254

Enabling and Disabling hyperlinks in JavaScript

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)

Upvotes: 0

Views: 9006

Answers (3)

Patrick T Nelson
Patrick T Nelson

Reputation: 1254

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];
    }
}

Upvotes: 0

Oleg V. Volkov
Oleg V. Volkov

Reputation: 22441

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.

Upvotes: 0

bokonic
bokonic

Reputation: 1771

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;
};

Upvotes: 2

Related Questions