如何检测用户点击了内部或外部链接

How to detect a user clicked on an internal or external link

本文关键字：内部 链接 外部 用户 何检测 检测      更新时间：2024-05-09

我需要知道用户是点击了内部链接还是外部链接来提醒他们
我的网站上有许多内部和外部链接

我的内部链接是这样的：

<a href="about.php">about</a>
<a href="tools/draw.php">draw graph</a>

我只需要在单击外部链接时发出警报。

（我在这里包括了两个方法：一个方法使用jQuery，另一个不使用jQuery。如果你不想使用jQuery的话，跳到粗体标题）

一种方法是向每个外部链接添加一个类，然后向该类中的所有内容附加一个事件处理程序，当您单击链接时会引发警报。不过，这很乏味，因为您必须将类添加到每个外部链接的中，而这不适用于用户生成的内容。

您可以使用jQuery和CSS选择器a[href^="http"]来选择所有外部链接，然后附加一个事件处理程序，在单击它们时引发警报：

$('a[href^="http"]').click(function() {
    alert();
});

a[href^="http"]的意思是"一个有链接的a标签，该链接必须以'http'开头。"因此，在这里，我们选择所有以http开头的元素，即每个外部链接，然后将其设置为当您单击它们时，会弹出警报。

非jQuery方法

如果要在没有jQuery的情况下执行此操作，则需要使用document.querySelectorAll('a[href^="http"]')并绑定该函数返回的数组中每个元素的click事件。看起来像这样：

var externalLinks = document.querySelectorAll('a[href^="http"]');
for (var i = externalLinks.length-1; i >= 0; i--) {
    externalLinks[i].addEventListener("click", function() { alert(); }, false);
}

我不得不在自己的网站上从头开始做这件事，所以我只需要为您复制并粘贴它。它来自我的一个对象内部，所以如果我留下一些this关键字，你可以删除它们。

function leaving() {
    var links = document.anchors || document.links || document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if ((links[i].getAttribute('href').indexOf('http') === 0 && links[i].getAttribute('href').indexOf('fleeceitout') < 0) && (links[i].getAttribute('href').indexOf('/') !== 0 && links[i].getAttribute('href').indexOf('#') !== 0) && links[i].className.indexOf('colorbox') < 0) {
            addEvent(links[i], 'click', this.action);
        }
    }
}
function action(evt) {
    var e = evt || window.event,
        link = (e.currentTarget) ? e.currentTarget : e.srcElement;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        window.location.href = link.href;
        return;
    }
    var leave = confirm("You are now leaving the _______ website.  If you want to stay, click cancel.");
    if (leave) {
        window.location.href = link.href;
        return;
    } else {
        return leave;
    }
}
var addEvent = function (element, myEvent, fnc) {
    return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};

用你的网站域名（microsoft.com等）替换"fleiceiout"实例，你就设置好了。

最简单的方法是使用jQuery，为外部链接使用一个特殊的类，或者检查URL中的"http://"。

像这样，如果使用特殊类：

$("a.external").on("click", function() {
    //de Do something special here, before going to the link.
    //de URL is: $(this).attr("href")
});

然后在HTML:中

<a href="http://external.link" class='external'>external link</a>

或者，您可以在URL中检查http://！那你就不需要特殊的课程了。

$('a[href=^"http://"]').on("click", function() {
    //de Do something special here, before going to the link.
    //de URL is: $(this).attr("href")
});

引用：我最初测试"http://"的方法有点慢，实际上是在.attr("href")上进行indexOf测试，所以我使用了@Matthew的选择器选择。忘记了插入符路由！向@Matthew提议，以及非jQuery替代方案。

$(document).ready(function() {
    $('a').click(function() {
        var returnType= true;
        var link = $(this).attr('href');
        if ( link.indexOf('http') >= 0 ) { 
            returnType=confirm('You are browsing to an external link.');
        }
        return returnType;
    });
 });`
相关文章：