Javascript 将 onclick 事件附加到带有 href 变量的所有链接答案

【问题标题】：Javascript attach an onclick event to all link with href variableJavascript 将 onclick 事件附加到带有 href 变量的所有链接
【发布时间】：2015-01-30 15:37:01
【问题描述】：

我正在尝试将 onclick 函数添加到我的所有具有“外部链接”类的链接。所以我已经成功地完成了它并做了一个测试，只要我点击一个它就会提醒“它有效”但是如何将该链接的href返回到函数中？我想把那个变量写成“http://www.example.com”。我试过 elements[i].href 但它说它是未定义的。

var elements = document.getElementsByClassName('external-link');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
      trackOutboundLink(‘http://www.example.com’); return false;
    }
}

【问题讨论】：

标签： javascript html onclick

【解决方案1】：

onclick 回调的上下文将是被点击的链接，因此您可以简单地使用 'this.href'

var elements = document.getElementsByClassName('external-link');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function () {
      trackOutboundLink(this.href); return false;
    }
}

【讨论】：

【解决方案2】：

您是否考虑过为此使用 jQuery？它有助于保持代码简洁明了，与大多数浏览器兼容，并使您无需处理复杂的对象树。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a.external-link").click(function(){
    alert("You clicked an external link to: " + $(this).attr("href"));
  });
});
</script>
</head>
<body>
<a class="external-link" href="http://www.example1.com">Example 1</a><br>
<a class="external-link" href="http://www.example2.com">Example 2</a><br>
<a class="internal-link" href="http://www.example3.com">Example 3</a> - <i>no alert</i>
</body>
</html>

资源：

【讨论】：