javascript - 通过javascript拦截文档中的每次点击

Question

我想将代码注入到几个页面中，这些页面将处理对文档中特定元素的点击。我通过 jQuery 成功地做到了这一点。

问题是 jQuery 并非在所有页面上都可用。所以它只工作了一半。我想检查我单击href的每个属性。<a>任何人都知道如何做到这一点？

Answer 1

您想向文档添加一个事件侦听器，这实际上是 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 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 不会做任何你自己用“普通”javascript 做不到的事情。您可以轻松地执行document.getElementsByName('a'), 并遍历结果以附加您的点击处理程序。

Answer 4

为了在每个链接上附加一个 EventListener，并在没有 jQuery 的情况下在点击时检索 href，我可能会这样做：

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

}