如何檢測單擊內部或外部鏈接的用戶

Question

我需要知道用戶是否點擊了內部或外部鏈接來提醒他們。
我的網站上有很多內部和外部鏈接。

我的內部鏈接是這樣的：

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

我只需要在點擊外部鏈接時發出警報。

Answer 1

（我在這里包含了兩種方法：一種方法使用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);
}

Answer 2

我必須在我自己的網站上從頭開始這樣做，所以我只是復制+粘貼在這里給你。 它來自在我的對象之一，所以如果我留下了一些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等）替換'fleeceitout'的實例，然后你就可以了。

Answer 3

最簡單的方法是使用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替代品。

Answer 4

$(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;
    });
 });`