Capturando todos <a> clic evento

Estoy pensando en agregar una función javascript para capturar todos los <a> eventos de clic dentro de una página html.Capturando todos <a> clic evento

Así que estoy añadiendo una función global que rige todas las <a> eventos de clic, pero no añadiendo a cada onclick (ni usando .onclick= ni attachEvent(onclick...) ni onclick= en línea). Dejaré cada <a> tan simple como <a href="someurl"> dentro del html sin tocarlos.

me trataron window.onclick = function (e) {...} pero eso sólo capta todos los clics ¿Cómo se especifica sólo los clics en <a> y para extraer los enlaces dentro de <a> que se ha hecho clic?

Restricción: No quiero usar ninguna biblioteca exra como jQuery, solo vainilla javascript.

Fuente

2012-09-23 user1589188

Lo siento edité. Faltaban todas las etiquetas html ... – user1589188

Puede manejar todas clic utilizando window.onclick y luego filtrar utilizando event.target

Ejemplo como lo pidió:

<html> 
<head> 
<script type="text/javascript"> 
window.onclick = function(e) { alert(e.target);}; 
</script> 
</head> 
<body> 
<a href="http://google.com">google</a> 
<a href="http://yahoo.com">yahoo</a> 
<a href="http://facebook.com">facebook</a> 
</body> 
</html>

Fuente

2012-09-23 11:31:30

Sí, por favor. Lo seleccionaré si tiene un ejemplo de código de cómo filtrar y extraer el href – user1589188

¡Gracias! Bueno, terminará siendo una combinación de tu e.target y e.target.localName de xdazz. ¡Pero ya que le ganas a xdazz unos minutos, te elegiré – user1589188

! esto se manejará y el campo de texto hace clic en –

Trate jQuery y

$('a').click(function(event) { *your code here* });

En esta función se puede extraer valor href de esta manera:

$(this).attr('href')

Fuente

2012-09-23 11:27:18 FLCL

lo siento no, no hay biblioteca adicional, solo IE9 o Firefox 15 – user1589188

-3

muy simple:

document.getElementById("YOUR_ID").onclick = function (e) {...}

El selector es lo que desea seleccionar lo que permite decir que tiene botón llamado

<a href="#" id="button1">Button1</a>

El código para capure esto es:

document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }

la esperanza de que ayuda

Fuente

2012-09-23 11:34:16 Kivylius

Gracias, pero lo siento, no quiero agregar manualmente un clic a cada ID. Quiero una función global que capture todas las que ya filtre dentro de – user1589188

usar algo como:

document.body.onclick = function(e){ 
    e = e || event; 
    var from = findParent('a',e.target || e.srcElement); 
    if (from){ 
    /* it's a link, actions here */ 
    } 
} 
//find first parent with tagName [tagname] 
function findParent(tagname,el){ 
    while (el){ 
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){ 
     return el; 
    } 
    el = el.parentNode; 
    } 
    return null; 
}

La técnica se llama event delegation

[editar] añadió una función para habilitar un clickHandler para enlaces anchura anidados html-elementos, como:
<a ...>link text</a>

Fuente

2012-09-23 11:37:34 KooiInc

¡Gracias! Parece todo bien, excepto que no puedo encontrar nodeName. from no tiene ninguna propiedad llamada nodeName – user1589188

En ese caso use '/^a$/i.test (from.tagName)' o [vea la respuesta editada] – KooiInc

¡Gracias! ¡Funcionó! Pero lo siento, tuve que elegir otro usuario. ¡Espero que tu código también sea útil para los demás! – user1589188

window.onclick = function (e) { 
    if (e.target.localName == 'a') { 
     console.log('a tag clicked!'); 
    } 
}

The working demo.

Fuente

2012-09-23 11:43:55 xdazz

Gracias! e.target.localName funciona muy bien! ¡Puedo usar esto con e.target para obtener el enlace! – user1589188

También puede tratar de usar esto:

var forEach = Array.prototype.forEach; 
var links = document.getElementsByTagName('a'); 
forEach.call(links, function (link) { 
    link.onclick = function() { 
     console.log('Clicked'); 
    } 

});

Funciona, Acabo de probar!

Demostración de Trabajo: http://jsfiddle.net/CR7Sz/

En algún lugar de los comentarios que usted ha mencionado que desea obtener el valor 'href' se puede hacer eso con esto:

var forEach = Array.prototype.forEach; 
var links = document.getElementsByTagName('a'); 
forEach.call(links, function (link) { 
    link.onclick = function() { 
     console.log(link.href); //use link.href for the value 
    } 

});

Demostración: http://jsfiddle.net/CR7Sz/1/

Fuente

2012-09-23 11:46:47

su idea delegue el evento a la ventana y luego verifique si el "event.target" es un enlace, es una forma de hacerlo (mejor sería document.body). El problema aquí es que no funcionará si hace clic en un nodo secundario de su elemento. Piense:

<a href="#"><b>I am bold</b></a>

la target sería el elemento , no el enlace. Esto significa que la comprobación de e.target no funcionará. Por lo tanto, tendrías que rastrear todo el árbol dom para verificar si el elemento cliqueado es un descendiente de un elemento <a>.

Otro método que requiere menos cómputo en cada clic, pero cuesta más para inicializar sería conseguir todos <a> etiquetas y adjuntar su evento en un bucle:

var links = Array.prototype.slice.call(
    document.getElementsByTagName('a') 
); 

var count = links.length; 
for(var i = 0; i < count; i++) { 
    links[i].addEventListener('click', function(e) { 
     //your code here 
    }); 
}

(PS: ¿por qué puedo convertir el HTMLCollection para ordenar? here's the answer.)

Fuente

2012-09-23 11:48:27 Roman

¡Muy informativo! ¡Muestra su conocimiento detallado sobre este asunto! Pero esto es más de lo que puedo masticar. Revisé el video, eso realmente avanzó para mí. ¡Pero seguramente tu conocimiento sería útil para otra persona! – user1589188

Debe tener en cuenta que un enlace se puede anidar con otros elementos y desea atravesar el árbol de regreso al elemento 'a'. Esto funciona para mí:

window.onclick = function(e) { 
    var node = e.target; 
    while (node != undefined && node.localName != 'a') { 
    node = node.parentNode; 
    } 
    if (node != undefined) { 
    console.log(node.href); 
    /* Your link handler here */ 
    return false; // stop handling the click 
    } else { 
    return true; // handle other clicks 
    } 
}

See v.g. https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

Fuente

2016-09-30 14:08:20

Supongo que este código simple funcionará con jquery.

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

Sin JQuery:

window.onclick = function(e) { 
if(e.target.localName=='a') 
    alert(e.target); 
};

Lo anterior producirá el mismo resultado.

Fuente

2017-03-06 14:00:09

El autor de la pregunta dice en los comentarios que no quiere utilizar ninguna biblioteca, solo vainilla javascript.Agregaré esos comentarios a la pregunta para que quede más claro. –

Hola Morten, Como preguntaste, edité el código para JavaScript simple. :) –

Capturando todos <a> clic evento

Respuesta

Cuestiones relacionadas