将函数应用于页面上的所有链接

Apply A Function to All Links on Page

本文关键字：链接 函数 应用于      更新时间：2024-05-27

我在页面上有我的所有链接，如下所示：

<a href="http://example.com">Example</a>

但是现在我想要所有链接与以下点击功能像这样：

<a onclick="show();" href="http://example.com">Example</a>

有人能告诉我jquery或javascript代码将上面的函数添加到正文上的所有链接中吗？谢谢

一些答案建议使用jQuery的click()函数。只要您不希望使用javascript动态添加新链接，就可以了。

此单击处理程序将绑定到<body>元素上，并在单击其中的<a>元素时激发。与$('a').click(...)相比，这种方法的优点是所有<a>标签都不需要出现在页面加载上：

$(function () {
  $('body').on('click', 'a', function (event) {
    event.preventDefault();
    show();
  });
});

Fiddle：http://jsfiddle.net/Lubf6gjw/2/

编辑：以下是如何使用纯javascript:进行编辑

document.querySelector('body')
.addEventListener('click', function (event) {
    if(event.target.tagName === 'A') { 
        event.preventDefault();
        show();
    }
});

http://jsfiddle.net/pymwsgke/1/

$(function(){
    $("a").click(function(){
        show();
    }
});

如果你想阻止浏览器遵循href，你可以添加一个preventDefault调用

$(function(){
    $("a").click(function(e){
        e.preventDefault();
        show();
    }
});

注意，这实际上不会将onclick=附加到<a>标签。如果你想这样做，你可以这样做：

$("a").each(function(){
    $(this).attr("onclick", $(this).attr("onclick")+";show();");
});

使用纯Js

 function show (event) {
   event.preventDefault();
  // do somethink
}
var anchors = document.querySelectorAll("a");
for(var a = 0; a < anchors.length; a++) {
     anchors[a].addEventListener("click",show,false)
}
相关文章：