在JavaScript中啓用和禁用超鏈接

Question

我正在開發一個項目，我需要暫時禁用所有超鏈接，然後在我的彈出式div消失後再次啓用它們。我能夠使用此功能，我寫成功禁用所有鏈接：

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= "#"; 
     } 
    } 

這也節省了所有的網址，以便它可以把他們回來以後使用此功能：

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

以上代碼似乎工作得很好，它將刪除所有鏈接，然後將它們全部返回，但沒有任何問題，但問題是如果在單擊鏈接後運行「啓用」代碼，它幾乎就像設置爲javascript鏈接返回原來的目的地然後 registeri點擊。因此，儘管以這種方式「禁用」，但鏈接仍然以離開頁面結束。

問題證明here

點擊紅色的「L」與白色背景，使我的選擇做出的JavaScript，你會發現什麼，你把你的鼠標會得到一個藍色虛線邊框，我需要能夠「選擇」網頁的一部分，而不用重定向到另一個頁面，如果一個鏈接也被點擊了..任何想法我怎麼能夠做到這一點正確？

（請注意，我試圖避免的JQuery）

Answer 1

我終於能夠通過操縱每個超鏈接的onclick屬性來解決我自己的問題，然後將其設置回它以前的狀態。 bokonic的迴應唯一的問題是，onclick屬性設置爲null以「重新啓用」鏈接，然後禁用鏈接之前的任何JavaScript功能。

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

Answer 2

上的onClick監聽工作：

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

Answer 3

而不是尋找許多環節和禁用它們（其中，順便說一句，不會幫助你與其他可點擊的對象相比），您可以創建另一個不可見的div，位於彈出窗口z-index的下方，它將覆蓋整個頁面並捕獲所有點擊，而不是下面的元素。您甚至可以將其設置爲半透明，而不是對視覺效果完全不可見，以提醒用戶「禁用較低級別」。