Question

我正在考虑添加一个javascript函数来捕获html页面中的所有<a>点击事件。

所以我添加了一个全局函数来管理所有<a>点击事件，但不添加onclick给每个（既不使用.onclick=也不使用attachEvent(onclick...)也不使用内联onclick=）。我会将每个<a>简单地留在html中<a href="someurl">，而不会触及它们。

我试过window.onclick = function (e) {...} 但这只是捕获所有点击如何仅指定<a>上的点击次数并提取正在点击的<a>内的链接？

限制：我不想使用任何像jQuery这样的exra库，只需使用vanilla javascript。

Answer 1

使用类似：

document.body.onclick = function(e){
  e = e || event;
  var from = findParent('a',e.target || e.srcElement);
  if (from){
     /* it's a link, actions here */
  }
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
  while (el){
    if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
      return el;
    }
    el = el.parentNode;
  }
  return null;
}

该技术称为event delegation

[编辑]添加了一个函数，为链接宽度嵌套的html元素启用clickhandler，如：
<a ...>link text</a>

Answer 2

您可以使用window.onclick处理所有点击，然后使用event.target

进行过滤

您问的示例：

<html>
<head>
<script type="text/javascript">
window.onclick = function(e) { alert(e.target);};
</script>
</head>
<body>
<a href="http://google.com">google</a>
<a href="http://yahoo.com">yahoo</a>
<a href="http://facebook.com">facebook</a>
</body>
</html>

Answer 3

window.onclick = function (e) {
    if (e.target.localName == 'a') {
        console.log('a tag clicked!');
    }
}

<强> The working demo.

Answer 4

您需要考虑链接可以与其他元素嵌套，并希望将树遍历回“a”元素。这对我有用：

window.onclick = function(e) {
  var node = e.target;
  while (node != undefined && node.localName != 'a') {
    node = node.parentNode;
  }
  if (node != undefined) {
    console.log(node.href);
    /* Your link handler here */
    return false;  // stop handling the click
  } else {
    return true;  // handle other clicks
  }
}

参见例如https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

Answer 5

您的想法是将事件委托给窗口，然后检查“event.target”是否是一个链接，是一种方法（更好的是document.body）。这里的麻烦是，如果单击元素的子节点，它将无法工作。认为：

<a href="#"><b>I am bold</b></a>

target将是元素，而不是链接。 这意味着检查e.target将无效。因此，您必须爬上所有dom树以检查被点击的元素是否是<a>元素的后代。

另一种方法，每次点击都需要较少的计算，但初始化的成本更高的是获取所有<a>标记并将您的事件附加到循环中：

var links = Array.prototype.slice.call(
    document.getElementsByTagName('a')
);

var count = links.length;
for(var i = 0; i < count; i++) {
    links[i].addEventListener('click', function(e) {
        //your code here
    });
}

（PS：为什么我要将HTMLCollection转换为数组？here's the answer.）

Answer 6

尝试jQuery和

$('a').click(function(event) { *your code here* });

在此功能中，您可以通过以下方式提取href值：

$(this).attr('href')

Answer 7

你也可以尝试使用它：

var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
    link.onclick = function () {
        console.log('Clicked');
    }

});

它有效，我刚刚测试过！

工作演示：http://jsfiddle.net/CR7Sz/

在你提到的评论的某个地方你想要获得“href”值，你可以用这个来做：

var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) {
    link.onclick = function () {
        console.log(link.href); //use link.href for the value
    }

});

演示：http://jsfiddle.net/CR7Sz/1/

Answer 8

一些已接受的答案不适用于嵌套元素，例如： <a href="...">link</a>

大多数情况下都有一个基本解决方案： ```

var links = document.getElementsByTagName('a');
for(var i in links)
{
    links[i].onclick = function(e){
        e.preventDefault();
        var href = this.href;
        // ... do what you need here.
    }
}

Answer 9

我想这个简单的代码适用于jquery。

 $("a").click(function(){
    alert($(this).attr('href'));
});

没有JQuery：

window.onclick = function(e) { 
if(e.target.localName=='a')
    alert(e.target);
};

以上将产生相同的结果。

Answer 10

很简单：

document.getElementById("YOUR_ID").onclick = function (e) {...}

选择器是你想要选择的，所以假设你有一个名为

的按钮

<a href="#" id="button1">Button1</a>

捕获这个的代码是：

document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }

希望有所帮助。

捕获所有<a> click event</a>

10 个答案: