如何使用Javascript检测链接点击（文字，图片等）？ [英] How to detect Link clicks (text, images, etc) with Javascript?

问题描述

我想要编写一个跨浏览器脚本，该脚本会检测链接在网页（文字链接，图片或其他方向）上的点击情况，以便我可以显示一则讯息或广告（如插页式广告），然后直接

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).

如何使用javascript完成此操作？

How can I accomplish this using javascript?

我使用事件侦听器吗？我要遍历所有链接对象吗？
还是别的什么？

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

我的javascript技能是新手/中级，所以详细的例子/解释非常感谢。

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

我在这里开始使用事件监听器，但到目前为止我检测到所有的点击页面：
addEventListener跨浏览器侦测的代码段翻译和用法

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

我会考虑一个JQuery的替代品，但我只是不知道如果它的工作在第三方网站，如果该网站没有JQuery库。

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.

感谢所有。

推荐答案

我想我会尝试一个非jQuery（和非其他库解决方案， ...好，填充几分钟）：

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.

修改上述内容，以检测 img 元素嵌套在 a 元素（我认为是您想要重新阅读您的问题）：

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 。

这篇关于如何使用Javascript检测链接点击（文字，图片等）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！