某些 CSS 类上的 Javascript 文档事件

Question

我习惯用 jQuery 编写按类进行选择，但是下面的代码我不能完全正确。这存在于每个页面上，应该只拦截带有“下载链接”类的链接。以下适用于所有链接。但我只想将它作为下载链接 css 的目标。

 document.onclick = function (e) {
                e = e ||  window.event;
                var element = e.target || e.srcElement;

                if (element.tagName == 'A') {
                    window.open(element.href, "_blank", "location=yes,toolbar=yes,toolbarposition=top");
                    return false; 
                }

            };

我无法确定 if 语句的选择器以将 element.tagName 更改为 element.class 或类似名称。

这是我尝试的最后一件事

 document.getElementById("download-link").addEventListener("click", function(e) {
        window.open(e.href, "_blank", "location=yes,toolbar=yes,toolbarposition=top");
return false;
        e.preventDefault();
    });

Answer 1

你提到

应该只拦截带有“下载链接”类的链接

虽然使用.getElementById()。您可以将.querySelectorAll() 与选择器".download-link" 和NodeList.prototype.forEach() 一起使用来执行任务，请参阅forEach method of Node.childNodes?。例如，为每个 ".download-link" 元素附加一个事件监听器

document.querySelectorAll(".download-link")
.forEach(function(element) {
  element.addEventListener("click", function(event) {
  // do stuff
  })
})

如果NodeList.prototype.forEach() 没有在浏览器中定义，你可以使用for 循环来达到同样的效果

for (var i = 0, nodes = document.querySelectorAll(".download-link");
      nodes && i < nodes.length; i++) {
        nodes[i].addEventListener("click", function(event) {
        // do stuff
        })
}