2010-01-25 4 views
10

come intercettare i clic di collegamento nel documento? deve essere multipiattaforma.usa javascript per intercettare tutti i clic di collegamento del documento

Cerco qualcosa di simile:

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

Grazie in anticipo per l'aiuto.

risposta

18
for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){ 
    ls[i].href= "...torture puppies here..."; 
} 

in alternativa se si desidera solo intercettare, non modificare, aggiungere un gestore onclick. Questo verrà chiamato prima che la navigazione verso l'url:

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

noti che document.links contiene anche AREA elementi con un attributo href - non solo A elementi.

2

Ho appena scoperto questo e potrebbe aiutare alcune persone. Oltre all'intercettazione, se si desidera disabilitare il collegamento per caricare un'altra pagina o ricaricare la pagina corrente. Basta impostare l'href su '#' (come nel prefisso di riferimento della pagina interna). Ora puoi usare il link per chiamare una funzione rimanendo nella stessa pagina.

+2

Aggiornamento: Questo non è il modo migliore. Usando 'href =" javascript: void (0) "' è spesso meglio dato che non costringe la pagina a ricaricare. [altro qui] (http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0) – worldsayshi

+1

Nota che entrambi questi modi impediscono agli utenti di utilizzare le azioni del tasto destro sui link (aperto in una nuova scheda, ecc.) –

9

E il caso in cui i collegamenti vengono generati mentre la pagina viene utilizzata? Ciò si verifica frequentemente con i quadri front-end più complessi di oggi.

La soluzione corretta sarebbe probabilmente quella di mettere il listener di eventi click sul documento. Questo perché gli eventi sugli elementi si propagano ai loro genitori e perché un link viene effettivamente applicato dal genitore più in alto.

Questo funzionerà per tutti i collegamenti, siano essi caricati con la pagina, o generati dinamicamente sul front-end in qualsiasi momento.

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); 
} 
Problemi correlati