Comment détecter les clics sur les liens (texte, images, etc.) avec Javascript?

J’essaie d’écrire un script inter-navigateurs qui détecte le clic d’un lien sur une page (lien de texte, image ou autre) pour pouvoir afficher un message ou une annonce (comme un interstitiel), puis diriger le visiteur l’URL de destination à l’origine cliqué.

Le script doit fonctionner à partir de sites tiers (où le propriétaire installe les balises de script sur son site).

Comment puis-je accomplir cela en utilisant javascript?

Est-ce que j’utilise un auditeur d’événement? Dois-je parcourir tous les objects de lien? Ou autre chose?

Mes compétences en javascript étant débutantes / intermédiaires, des exemples / explications détaillés sont grandement appréciés.

J’ai commencé à utiliser l’écouteur d’événements ici, mais jusqu’à présent, je détecte TOUS les clics sur la page: addEventListener Extrait de code, traduction et utilisation, pour la détection de plusieurs navigateurs

Je vais envisager une alternative à JQuery, mais je ne sais tout simplement pas comment cela fonctionnera sur un site tiers si ce site ne dispose pas de la bibliothèque JQuery.

Merci a tous.

Je pensais essayer une solution non-jQuery (et une solution non-autre-librairie aussi, juste pour … bon, en remplissant quelques minutes):

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


  Démo de JS Fiddle . 
  Amendé ce qui précède, pour détecter les éléments img nesteds dans a élément (ce que je pense, c'est ce que vous voulez avoir à relire votre question): 
 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 

  Démo de JS Fiddle .




		      	  Pour appeler une fonction chaque fois qu’un lien (ajouté dynamicment ou non) a été cliqué, utilisez 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 vous utilisez une ancienne version de jQuery, utilisez delegate () (notez que l’ordre du sélecteur et le type d’événement sont modifiés). 
 $(document).delegate("a", "click", function() { //this == the link that was clicked var href = $(this).attr("href"); alert("You're trying to go to " + href); }); 



		      	  Voici à peu près comment le faire sans utiliser jQuery: 
      foo bar   



		      	  J’utilise cela de cette façon, cela n’affecte que les balises avec des liens, 
 (function($){ $("a[href!='']").each(function(){ $(this).click(function(){ var href = $(this).attr("href") }) }); })(jQuery); 
  Mais sur cette note, vous indiquez que vous souhaitez que les personnes l’utilisent sur des sites Web tiers afin de ne pas utiliser jQuery; vous devrez donc peut-être cocher cette case en haut de votre fichier, mais vous devrez ensuite inclure votre fichier vérifier votre object ou un nom de fonction 
 if(typeof(jQuery) == undefined){ var head = docuent.getElementsByTagName('head')[0]; var script = document.createElement("script"); script.setAtsortingbute("type", "text/javascript"); script.setAtsortingbute("src", "http://yourserver.url/jquery.js"); head.appendChild(script); }