攔截通過javascript在文檔中的每一次點擊

Question

我想注入一個代碼到幾個頁面，將處理點擊文檔中的特定元素。 我成功通過jQuery做到這一點。

問題是jQuery在所有頁面上都不可用。所以它只有一半的時間。我想檢查我點擊的每個<a>的href屬性。任何人都知道如何做到這一點？

Answer 1

jquery沒有做任何事情，你不能用「簡單」的JavaScript自己做。你可以輕鬆地做一個document.getElementsByName('a')，並在結果上循環以附加你的點擊處理程序。

Answer 2

你可以在頁面中插入jQuery，然後照常進行。

你會通過瀏覽器的JS控制檯來做到這一點。

var script = document.createElement('script'); 
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
document.head.appendChild(script); 

Answer 3

你想添加一個事件監聽器到文檔中，這實際上是jQuery爲你做的。

退房的MDN文檔上添加事件監聽器：

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

你的結果應該是這樣的：

document.addEventListener('click', yourFunction, false); 

這個工作在IE9 +和所有其他的瀏覽器。爲了支持IE8及以下使用的attachEvent代替：

if (document.addEventListener) { 
    document.addEventListener('click', yourFunction, false); 
} 
else if (document.attachEvent) { 
    document.attachEvent('click', yourFunction, false); 
} 

你的作用進行傳遞，這將有一個名爲「目標」屬性，這是被點擊的節點的事件對象。你可以閱讀更多有關在一個MDN，太：

https://developer.mozilla.org/en-US/docs/DOM/event

再次聲明，這只是在IE9 +和標準的瀏覽器。在IE7和IE8中，事件對象是窗口對象的一個​​屬性......但如果您在Google上進行偵察並未發現某些結果，那麼這就是另一個問題的主題。

這基本上是jQuery在幕後做的事情。我建議閱讀jQuery的源代碼可以教會你很多這樣的技巧。

Answer 4

對於每一個環節上附加一個事件偵聽和檢索上點擊HREF沒有jQuery的，我可能會做這樣的事情：

function trackClick(event) { 
    alert(this.href); 
} 


window.onload = function() { 

    var links = document.getElementsByTagName('a'); 

    for (var i = 0; i < links.length; i++) { 
     links[i].addEventListener('click', trackClick, false); 
    }; 

}