Geek Answers Handbook

How to detect click links (text, images, etc.) using Javascript?

I am trying to write a Cross-Browser script that detects when a link is clicked on a page (text link, image, or on the other hand) so that I can display a message or ad (e.g. interstitial) and then direct the visitor to the destination destination URL.

The script should work from third-party sites (where the owner sets the script tags on his site).

How can I accomplish this using javascript?

Am I using an event listener? Am I iterating over all link objects? Or something else?

My JavaScript skills are new / intermediate, so detailed examples / explanations are much appreciated.

I started using the event listener here, but so far I find ALL clicks on the page: addEventListener Code Snippet Translation and use to detect multiple browsers

I will consider an alternative to jQuery, but I just don’t know how it will work on a third-party site if there is no jQuery library on this site.

Thanks to everyone.

+9
javascript jquery cross-browser event-listener
source share
4 answers

I thought I would try non-jQuery (and a non-library solution too, just for ... well, after filling in a few 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<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 .

Changed the above to detect img elements nested in element a (which I think you need to re-read your 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<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 .

+6
source share

To call a function whenever a link is clicked that is dynamically added or has not been clicked, use 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); });

If you are using an older version of jQuery, you should use delegate () (note that the selection order and event type are switched)

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

I use it this way, it only affects tags with links in them,

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

But in this note, you say that you want to use this on third-party websites so that they do not have jQuery, so you may need this check at the top of your file, but then you will need to include your file after using the same code but check your object or function name

 if(typeof(jQuery) == undefined){ var script = document.createElement("script"); script.setAttribute("src", "http://yourserver.url/jquery.js"); document.head.appendChild(script); }
0
source share

This is roughly how to do this without using 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>
0
source share

More articles:


All Articles