¿Cómo detectar Clics de enlace (texto, imágenes, etc.) con Javascript?

Question

Estoy tratando de escribir un script de navegador cruzado que detecta cuando se hace clic en un enlace de una página (enlace de texto, imagen u otro) para que pueda mostrar un mensaje o anuncio (como un intersticial) y luego dirigir el visitante a la url de destino originalmente seleccionada.

La secuencia de comandos tiene que funcionar desde sitios de terceros (donde el propietario instala las etiquetas de secuencia de comandos en su sitio).

¿Cómo puedo lograr esto usando javascript?

¿Utilizo un detector de eventos? ¿Repito a través de todos los objetos de enlace? ¿O algo más?

Mis habilidades de JavaScript son nuevas/intermedias entonces los ejemplos detallados/las explicaciones son muy apreciados.

he empezado a basar el detector de eventos aquí, pero hasta ahora estoy detectar todos los clics en la página: addEventListener Code Snippet Translation and Usage for cross-browser detectioin

voy a considerar una alternativa jQuery, pero simplemente no saben cómo funcionará en un sitio de terceros si ese sitio no tiene la biblioteca de JQuery.

Gracias todos.

Answer 1

pensé que iba a tratar un no jQuery (y una solución que no es de otra biblioteca, solo para ... bueno, rellenar g unos pocos minutos):

function clickOrigin(e){ 
    var target = e.target; 
    var tag = []; 
    tag.tagType = target.tagName.toLowerCase(); 
    tag.tagClass = target.className.split(' '); 
    tag.id = target.id; 
    tag.parent = target.parentNode; 

    return tag; 
} 

var tagsToIdentify = ['img','a']; 

document.body.onclick = function(e){ 
    elem = clickOrigin(e); 

    for (i=0;i<tagsToIdentify.length;i++){ 
     if (elem.tagType == tagsToIdentify[i]){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).'); 
      return false; // or do something else. 
     } 
    } 
}; 

JS Fiddle demo.

Modificado lo anterior, para detectar img elementos anidados dentro de un elemento a (que yo creo es lo que está queriendo haber releer su pregunta):

function clickOrigin(e){ 
    var target = e.target; 
    var tag = []; 
    tag.tagType = target.tagName.toLowerCase(); 
    tag.tagClass = target.className.split(' '); 
    tag.id = target.id; 
    tag.parent = target.parentNode.tagName.toLowerCase(); 

    return tag; 
} 

var tagsToIdentify = ['img','a']; 

document.body.onclick = function(e){ 
    elem = clickOrigin(e); 

    for (i=0;i<tagsToIdentify.length;i++){ 
     if (elem.tagType == tagsToIdentify[i] && elem.parent == 'a'){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case and one inside an "a" element, no less!).'); 
      return false; // or do something else. 
     } 
     else if (elem.tagType == tagsToIdentify[i]){ 
      console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).'); 
      return false; // or do something else. 
     } 
    } 
}; 

JS Fiddle demo.

Answer 2

Para llamar a una función cada vez que un enlace de forma dinámica añadió o no se ha hecho clic, utilice on()

$(document).on("click", "a", function() { 
    //this == the link that was clicked 
    var href = $(this).attr("href"); 
    alert("You're trying to go to " + href); 
}); 

Si está utilizando una versión anterior de jQuery, entonces se usaría delegate() (tenga en cuenta que la orden del selector y el tipo de evento se activa)

$(document).delegate("a", "click", function() { 
    //this == the link that was clicked 
    var href = $(this).attr("href"); 
    alert("You're trying to go to " + href); 
}); 

Answer 3

utilizo este de esa manera que sólo afecta a las etiquetas con unos eslabones de ellos,

(function($){ 
$("a[href!='']").each(function(){ 
    $(this).click(function(){ 
    var href = $(this).attr("href") 
    }) 
}); 
})(jQuery); 

Pero en esta nota dices que quieres que la gente use esto en sitios web de terceros para que no tengan jQuery, por lo que es posible que necesites este control en la parte superior del archivo, pero luego deberás incluirlo después del uso el mismo código pero el registro para el objeto o un nombre de función

if(typeof(jQuery) == undefined){ 
    var head = docuent.getElementsByTagName('head')[0]; 
    var script = document.createElement("script"); 
    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", "http://yourserver.url/jquery.js"); 
    head.appendChild(script); 
} 

Answer 4

Esto es más o menos cómo hacerlo sin uso de jQuery:

<html> 

    <head> 
      <script type="text/javascript"> 
      window.onload = function() { 
       var observed = document.getElementsByTagName('a'); 

       for (var i = 0; i < observed.length; i++) { 
       observed[i].addEventListener('click', function (e) { 
        var e=window.event||e; 

        alert('Clicked ' + e.srcElement.innerText); 

        if (e.preventDefault) { e.preventDefault() } else { e.returnValue=false } 
       }, false); 
       } 
      } 
      </script> 
    </head> 


    <body> 

      <a href="">foo</a> 
      <a href="">bar</a> 

    </body> 
</html>