Question

我的页面上的所有链接都是这样的：

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

但现在我希望所有链接都跟随OnClick功能如下：

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

任何人都可以告诉我jquery或javascript代码将上述功能添加到正文上的所有链接，谢谢

Answer 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();");
});

Answer 2

有些答案建议使用jQuery的click()函数。只要您不希望使用javascript动态添加新链接，那就没问题。

此单击处理程序将绑定在<body>元素上，并在单击其中的<a>元素时触发。相对于$('a').click(...)而言，优势在于页面加载时不需要显示所有<a>标记：

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

小提琴：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/

Answer 3

使用纯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)
}

将功能应用于页面上的所有链接

3 个答案: