title: Enabling and Disabling hyperlinks in JavaScript
body: <p>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:</p>
  
  <pre><code>    function disableHyperlinks(){
          link_targets = Array();
          var anchors = document.getElementsByTagName("a");
          for(var i = 0; i &lt; anchors.length; i++){
              link_targets.push(anchors[i].href);
              anchors[i].href= "#";
          }
       }
  </code></pre>
  
  <p>Which also saves all the URLs so it can put them back later using <em>this</em> function:</p>
  
  <pre><code>    function enableHyperlinks(){
          var anchors = document.getElementsByTagName("a");
          for(var i = 0; i &lt; anchors.length; i++){
              anchors[i].href= link_targets[i];
          }
      }
  </code></pre>
  
  <p>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 <em>then</em> registering the click. So despite being 'disabled' in this fashion, the link still ends up leaving the page.</p>
  
  <p>The problem is demonstrated <a href="http://www.fullofepicwin.com/likeler/StackOverflowCopy/imsafe/" rel="nofollow">here</a></p>
  
  <p>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?</p>
  
  <p>(Please note I am trying to avoid JQuery)</p>