Verwenden Sie Javascript, um alle Klicks auf Dokumentverknüpfungen abzufangen

Question

Wie kann ich Linkklicks im Dokument abfangen? muss es plattformübergreifend sein.

Ich suche etwas wie folgt aus:

// content is a div with innerHTML 
var content = document.getElementById("ControlPanelContent"); 

content.addEventListener("click", ContentClick, false); 

function ContentClick(event) { 

    if(event.href == "http://oldurl") 
    { 
    event.href = "http://newurl"; 
    } 
} 

Vielen Dank im Voraus für die Hilfe.

Answer 1

Wenn Sie nur abfangen, nicht ändern möchten, fügen Sie einen onclick-Handler hinzu. Dies wird auf die URL aufgerufen werden, bevor die Navigation:

var handler = function(){ 
    ...torment kittens here... 
} 
for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){ 
    ls[i].onclick= handler; 
} 

Beachten Sie, dass document.links enthält auch AREA Elemente mit einem href Attribut - nicht nur A Elemente.

Answer 2

Ich habe gerade herausgefunden, und es kann einigen Menschen helfen. Wenn Sie nicht zulassen möchten, dass der Link eine andere Seite lädt oder die aktuelle Seite neu lädt. Setzen Sie den href einfach auf '#' (wie im internen Präfix der Seitenreferenzen). Jetzt können Sie den Link verwenden, um eine Funktion aufzurufen, während Sie auf der gleichen Seite bleiben.

Answer 3

Was ist mit dem Fall, wo die Links generiert werden, während die Seite verwendet wird? Dies tritt häufig bei heutigen komplexeren Front-End-Frameworks auf.

Die richtige Lösung wäre wahrscheinlich, den Click-Ereignis-Listener auf das Dokument zu setzen. Dies liegt daran, dass Ereignisse für Elemente an ihre übergeordneten Elemente weitergegeben werden und eine Verknüpfung tatsächlich vom übergeordneten Element ausgeführt wird.

Dies funktioniert für alle Verknüpfungen, unabhängig davon, ob sie mit der Seite geladen werden oder dynamisch zu jedem Zeitpunkt am Frontend generiert werden.

function interceptClickEvent(e) { 
    var href; 
    var target = e.target || e.srcElement; 
    if (target.tagName === 'A') { 
     href = target.getAttribute('href'); 

     //put your logic here... 
     if (true) { 

      //tell the browser not to respond to the link click 
      e.preventDefault(); 
     } 
    } 
} 


//listen for link click events at the document level 
if (document.addEventListener) { 
    document.addEventListener('click', interceptClickEvent); 
} else if (document.attachEvent) { 
    document.attachEvent('onclick', interceptClickEvent); 
}