Anula el comportamiento predeterminado para los objetos de enlace ('a') en Javascript

Question

No sé si lo que intento lograr es posible. Me gustaría sobrescribir el comportamiento predeterminado para todos los objetos de anclaje (etiqueta A) para una página HTML determinada. Sé que puedo recorrer todos los elementos de A y agregar dinámicamente una llamada onclick a cada uno de ellos desde el método de elemento de cuerpo onload, pero estoy buscando una solución más absoluta. Lo que necesito es que todos los A elementos se les asigna una acción onclick que llama a un método que pasa la propiedad elemento href como argumento, por lo que el siguiente:

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

convierte dinámicamente:

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

Como he dijo, la forma ideal de hacer esto sería anular de algún modo la clase Anchor cuando se carga el documento. Si no es posible, recurriré al método de los elementos de A en loop-through-all (que ya sé cómo hacer).

Answer 1

Si no desea iterar sobre todos los elementos de anclaje, puede simplemente usar event delegation, por ejemplo:

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

Comprobar el ejemplo anterior 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; 
     } 
} 

Esta es la forma más sencilla de hacerlo. Envuelva en <script type="text/javascript">...</script> en el encabezado del documento y se ejecutará en la carga de la página.

Answer 3

No hay manera de anular todos los elementos de anclaje onlick event. Puede agregar un clic en el cuerpo del documento y tener lógica para ver si se propagó incluso desde un elemento delimitador, y realizar el evento en ese caso, pero esta solución podría causar problemas si su página es compleja y no está propagando clics. en algunos casos.

Me quedaría con la solución getElementsByTagName si es posible.

Answer 4

Usando jQuery:

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

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

Answer 5

No utilice un caso si hay varios eventos que necesita para manejar. Use en su lugar la composición de cuerdas para construir la ruta a la función que necesita ser llamada. Esto requiere que se agregue un prototipo a los elementos "A" que definen el valor predeterminado y la secuencia que se va a componer. Un atributo de datos en el elemento debería poder anular el predeterminado. Básicamente, solo queremos que un mensaje y una acción pasen de forma predeterminada y se cambien de forma declaritiva en el marcado. La acción especificada debe publicarse en alguna parte como una API u otra función de biblioteca accesible y puede invocarse mediante lib ['nombreFunciones']. Solo dale un atributo, no te preocupes por el nombre o la identificación. El prototipo y el atributo serán útiles para rebotar, ya que tendrá que rebotar.

Answer 6

Similar a la respuesta de Benji XVI, pero usando querySelectorAll, dentro de, por ejemplo, un contenedor div con clase 'contenedor' Y usando 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') 
    } 
})