Javascript为所有链接附加一个onclick事件

Javascript attach an onclick event to all links

本文关键字：一个 事件 onclick 链接 Javascript      更新时间：2023-09-26

我想在网站的每个链接上附加一个函数来更改参数。

如果没有jQuery，我怎么能做到这一点?

我如何遍历每个链接(它可能是一个DOM项目)并调用一个函数?

很奇怪，没有人提供使用事件冒泡的替代解决方案

function callback(e) {
    var e = window.e || e;
    if (e.target.tagName !== 'A')
        return;
    // Do something
}
if (document.addEventListener)
    document.addEventListener('click', callback, false);
else
    document.attachEvent('onclick', callback);

该解决方案的优点是，当您动态添加另一个锚点时，您不需要专门将事件绑定到它，因此所有链接都会触发此锚点，即使它们是在这些行执行后添加的。这与迄今为止发布的所有其他解决方案形成对比。当您的页面上有大量链接时，此解决方案也更为理想。

getElementsByTagName被所有现代浏览器支持，一直到IE 6

var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
        // stuff
    }
}

我想提供一个改进@zatatatata的答案，它也适用于嵌套元素的链接。

function findLink(el) {
    if (el.tagName == 'A' && el.href) {
        return el.href;
    } else if (el.parentElement) {
        return findLink(el.parentElement);
    } else {
        return null;
    }
};
function callback(e) {
    const link = findLink(e.target);
    if (link == null) { return; }
    e.preventDefault();
    // Do something here
};
document.addEventListener('click', callback, false);

如果被点击的元素不是一个链接，我们搜索它的父元素来检查是否有链接元素

function linkClickHandler(a) {
  console.log(a.host);
}
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) links[i].onclick = function() {
    linkClickHandler(links[i]);
}

更好的方法:

const item = document.querySelectorAll(".nav__item");
item.forEach(link => {
  link.addEventListener("click", function () {
    link.classList.add("nav__item--active");
  });
});

像这样的东西应该对你有用:

var elements = document.getElementsByTagName("a"),
    i,
    len,
    el;
for (i = 0, len = elements.length; i < len; i++) {
    el = elements[i];
    // Do what you need on the element 'el'
}

尝试使用getElementsByTagName('a')

相关文章：