Ignora comportamento predefinito per gli oggetti di collegamento ('a') in Javascript

Question

Non so se ciò che sto cercando di realizzare è possibile. Vorrei sovrascrivere il comportamento predefinito per tutti gli oggetti di ancoraggio (tag A) per una determinata pagina HTML. So che posso scorrere tutti gli elementi A e aggiungere dinamicamente una chiamata onclick a ognuno di essi dal metodo body body onload, ma sto cercando una soluzione più assoluta. Che cosa ho bisogno è che tutti A gli elementi vengono assegnati un onclick azione che chiama un metodo che passa la proprietà elemento href come argomento, quindi il seguente:

<a href="http://domain.tld/page.html"> 

diventa dinamico:

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;"> 

Come ho detto, il modo ideale per fare questo sarebbe in qualche modo scavalcare la classe Anchor quando il documento viene caricato. Se non è possibile, ricorro al metodo degli elementi loop-through-A (che so già come fare).

Answer 1

Se non si desidera iterare su tutti gli elementi di ancoraggio, si può utilizzare semplicemente event delegation, ad esempio:

document.onclick = function (e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    if (element.tagName == 'A') { 
    someFunction(element.href); 
    return false; // prevent default action and stop event propagation 
    } 
}; 

Controllare l'esempio precedente here.

Answer 2

window.onload = function() { 
    var anchorElements = document.getElementsByTagName('a'); 
    for (var i in anchorElements) 
     anchorElements[i].onclick = function() { 
      alert(this.href); 
      return false; 
     } 
} 

Questo è il modo più semplice per farlo. Avvolgi in <script type="text/javascript">...</script> nella testina del documento e verrà eseguito al caricamento della pagina.

Answer 3

Non è possibile sovrascrivere tutti gli eventi onlick degli elementi di ancoraggio. È possibile aggiungere un onclick al corpo del documento e disporre della logica per vedere se il pari viene propagato da un elemento di ancoraggio ed eseguire l'evento in quel caso, ma questa soluzione potrebbe causare problemi se la pagina è complessa e non sta propagando i clic in alcuni casi.

Rimanerei con la soluzione getElementsByTagName se possibile.

Answer 4

utilizzando jQuery:

$(function() { 
    $("a").click(function() { 
     return someMethodName($(this).attr('href')); 
    }); 
}); 

function someMethodName(href) 
{ 
    console.log(href); 
    return false; 
} 

Answer 5

Non usare un caso se ci sono più eventi che è necessario gestire. Usa invece la composizione a stringa per costruire il percorso della funzione che deve essere chiamata. Ciò richiede che un prototipo venga aggiunto agli elementi "A" che definiscono il valore predefinito e la stringa da comporre. Un attributo dati sull'elemento dovrebbe essere in grado di ignorare il valore predefinito. In sostanza, vogliamo solo che un messaggio e un'azione vengano passati per impostazione predefinita e modificati in modo dichiarativo nel markup. L'azione specificata dovrebbe essere pubblicata da qualche parte come API o altra funzione di libreria accessibile ed essere richiamabile da lib ['funName']. Dagli un attributo, nessuna preoccupazione per nome o id. Il prototipo e l'attributo saranno utili per il debounce, perché dovrai rimbalzare.

Answer 6

Simile alla risposta di Benji XVI, ma utilizzando querySelectorAll, all'interno di un contenitore div con classe 'contenitore' e utilizzando es6.

const $elems = document.querySelectorAll('.container a') 
var elems = Array.from($elems) 
elems.map(a => { 
    a.onclick = (e) => { 
    e.preventDefault() 
    window.alert('Clicking external links is disabled') 
    } 
})