22
4

11 回答 11

41
于 2012-09-23T11:37:34.843 回答
29

您可以使用 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>
于 2012-09-23T11:31:30.083 回答
9 
​window.onclick = function (e) {
    if (e.target.localName == 'a') {
        console.log('a tag clicked!');
    }
}​

工作演示。

于 2012-09-23T11:43:55.907 回答
5

您将事件委托给窗口然后检查“event.target”是否是链接的想法是一种方法（最好是document.body）。这里的问题是，如果您单击元素的子节点，它将不起作用。思考：

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

将target是<b>元素，而不是链接。这意味着检查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 转换成数组？这里是答案。）

于 2012-09-23T11:48:27.577 回答
5

您需要考虑到链接可以与其他元素嵌套，并希望遍历树回到“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/

于 2016-09-30T14:08:20.070 回答
2

尝试 jQuery 和

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

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

$(this).attr('href')
于 2012-09-23T11:27:18.307 回答
2

你也可以尝试使用这个：

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/

于 2012-09-23T11:46:47.927 回答
1

一些公认的答案不适用于嵌套元素，例如： <a href="..."><font><u>link</u></font></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.
    }
}
于 2019-01-07T11:33:57.303 回答
0

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

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

没有 JQuery：

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

以上将产生相同的结果。

于 2017-03-06T14:00:09.093 回答
0

如果有人正在寻找打字版本（TypeScript，使用 Kooilnc 的答案），这里是：

document.addEventListener("click", (e: Event) => {
    if(!e.target) { return; }
    if(!(e.target instanceof Element)) { return; }
    
    const origin = e.target.closest("a");
    if(!origin || !origin.href) { return; }
    
    console.log(`You clicked ${origin.href}`);
});
于 2021-09-03T16:13:18.803 回答
-3

非常简单 ：

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

选择器是您要选择的内容，因此假设您有调用按钮

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

捕获这一点的代码是：

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

希望有帮助。

于 2012-09-23T11:34:16.750 回答