我正在嘗試編寫一個跨瀏覽器腳本，用於檢測何時在頁面（文本鏈接，圖像或其他方面）上單擊鏈接以便我可以顯示消息或廣告（如插頁式廣告），然後指示訪問者最初點擊的目標網址。如何使用Javascript檢測鏈接點擊（文字，圖片等）？
該腳本必須從第三方網站（其所有者在其網站上安裝腳本標記）開始工作。
我該如何使用javascript來完成此操作？
我是否使用事件偵聽器？我是否遍歷所有鏈接對象？ 還是別的？
我的JavaScript技能是新手/中級如此詳細的例子/解釋非常感謝。
我已經開始在這裏下車使用事件偵聽器，但到目前爲止，我檢測網頁上的所有點擊： addEventListener Code Snippet Translation and Usage for cross-browser detectioin
我會考慮一個jQuery選擇，但我只是不知道如何它會在第三方網站上工作，如果該網站沒有JQuery庫。
謝謝大家。
我想我會嘗試一個非jQuery的（也是非其他庫的解決方案，只是爲了......好，填入g幾分鐘）：
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.
}
}
};
修訂以上，以檢測嵌套在a元素中img元素（這是我認爲是你在想什麼已經重讀你的問題）：
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.
}
}
};
+1 - 真的很酷，但爲什麼是'var標記= [];的''而不是var tag = {};'？將動態屬性放入數組不是很糟糕嗎？ –
也爲IE瀏覽器，你可能要檢查'e.srcElement'如果有對事件沒有「目標」屬性。 – Pointy
@AdamRackis，它可能是，但我不知道的是，直到您的評論（我有點了解到偶然的JavaScript，通過jQuery ...所以我可以用它（開心！），但不一定是「好」）。 –
要調用每當鏈路動態添加或不被點擊的功能，使用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);
});
我使用這種方式，只會影響與他們聯繫的一個標籤，
(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);
}
馬丁，第二部分是一個不錯的代碼。僅供將來參考 - 在追加腳本標記之後，頁面是否需要重新加載才能運行腳本的其餘部分？ –
是的，沒有頁面不需要重裝一次包含代碼的腳本代碼是否完成將加載（下載）您的jQuery文件 –
這大致是如何做到這一點沒有使用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>
有一件事你可能將不得不應對最終的是，一些網站將有自己的處理程序鏈接點擊，這將是硬/不可能以確保您的處理程序首先調用。 – Pointy
@Pointy - 這是一個很好的觀點......甚至沒有考慮到這一點。我只需要向使用我的代碼的任何人指出典型的注意事項和免責聲明。 –