How to detect Link clicks (text, images, etc) with Javascript?

Question

I'm trying to write a Cross-Browser script that detects when a link is clicked on a page (text link, image, or othwerwise) so that I can show a message or ad (like an interstitial) and then direct the visitor to the originally clicked destination url.

The script has to work from 3rd party sites (where the owner installs the script tags on his or her site).

How can I accomplish this using javascript?

Do I use an event listener? Do I iterate through all link objects? Or something else?

My javascript skills are newbie/intermediate so detailed examples/explanations are greatly appreciated.

I've started off using the event listener here, but so far I'm detecting ALL clicks on the page: addEventListener Code Snippet Translation and Usage for cross-browser detectioin

I'll consider a JQuery alternative, but I just don't know how it'll work on 3rd party site if that site doesn't have the JQuery library.

Thanks all.

Answer 1

To call a function whenever a link—dynamically added or not—has 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're using an older version of jQuery, then you would use delegate() (note that the order of selector and event type is 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);
});

Answer 2

I thought I'd try a non-jQuery (and non-other-library solution too, just for...well, filling 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.

Amended the above, to detect img elements nested within an a element (which I think is what you're wanting having 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.