拦截通过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); 
    }; 

}