如何使用Javascript檢測鏈接點擊（文本，圖像等）？

Question

我正在嘗試編寫一個跨瀏覽器腳本，用於檢測何時在頁面上單擊鏈接（文本鏈接，圖像或其他方式），以便我可以顯示消息或廣告（如插頁式廣告），然后將訪問者指向最初點擊的目標網址。

該腳本必須在第三方站點（所有者在其站點上安裝腳本標記 ）中工作。

我怎樣才能使用javascript實現這一目標？

我是否使用事件監聽器？ 我是否遍歷所有鏈接對象？ 或者是其他東西？

我的javascript技能是新手/中級，所以詳細的例子/解釋非常感謝。

我開始在這里使用事件監聽器，但到目前為止我正在檢測頁面上的所有點擊： addEventListener代碼片段翻譯和用於跨瀏覽器檢測

我會考慮使用JQuery替代方案，但我不知道如果該網站沒有JQuery庫，它將如何在第三方網站上運行。

謝謝大家。

Answer 1

要在單擊動態添加或未動態鏈接時調用函數，請使用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);
});

如果您使用的是舊版本的jQuery，那么您將使用delegate（）（請注意，切換選擇器和事件類型的順序）

$(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

我以為我會嘗試非jQuery（以及非其他庫解決方案，只是為了......好吧，填充幾分鍾）：

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小提琴演示。

修訂以上，檢測img嵌套的內部元件a元件（我想這是你想要什么有重讀你的問題）：

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小提琴演示。

Answer 3

我這樣使用它只影響帶有鏈接的標簽，

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

但是在這個說明中你說你想讓人們在第三方網站上使用它，所以他們可能沒有jQuery所以你可能需要在你的文件頂部進行這項檢查，但是你需要在使用相同的代碼之后包含你的文件但是檢查您的對象或函數名稱

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

Answer 4

這大致是如何在不使用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>

如何使用Javascript檢測鏈接點擊（文本，圖像等）？

問題描述

4 個解決方案

解決方案1
10 2011-12-09 21:14:52

解決方案2
8 已采納 2011-12-09 22:04:19

解決方案3
0 2011-12-09 21:40:17

解決方案4
0 2011-12-09 21:51:10

如何使用Javascript檢測鏈接點擊（文本，圖像等）？

問題描述

4 個解決方案

解決方案1 10 2011-12-09 21:14:52

解決方案2 8 已采納 2011-12-09 22:04:19

解決方案3 0 2011-12-09 21:40:17

解決方案4 0 2011-12-09 21:51:10

解決方案1
10 2011-12-09 21:14:52

解決方案2
8 已采納 2011-12-09 22:04:19

解決方案3
0 2011-12-09 21:40:17

解決方案4
0 2011-12-09 21:51:10