某些css类上的Javascript文档事件

时间:2017-08-18 15:21:38

标签: javascript html

我习惯用jQuery编写来按类选择,但是以下我不能完全正确地获取代码。它存在于每个页面上,应该只是拦截类“download-link”的链接。以下适用于所有链接。但是我想针对下载链接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();
    });

1 个答案:

答案 0 :(得分:4)

你提到

  

应该只是拦截类'download-link'

的链接

虽然使用.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
        })
}