可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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.

回答2:

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);
});

回答3:

This is roughly how to do it without use of 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>

回答4:

i use this that way it only affects the a tags with links in them,

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

But on this note you say your wanting people to use this on 3rd party web sites so they might not have jQuery so you might need this check in the top of your file but then you will need to include your file after use the same code but check for your object or a function name

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);
}