Javascript 将 onclick 事件附加到所有 link 具有 href 变量

Question

我正在尝试使用 "external-link" 的 class 向我的所有 link 添加一个 onclick 函数。所以我已经成功地完成了它并做了一个测试，无论何时我点击它都会提醒 "it works" 但是 return 那个 link 的 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;
    }
}

Answer 1

您的 onclick 回调上下文将是被点击的 link，因此您可以简单地使用 '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;
    }
}

Answer 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>

资源：

Javascript 将 onclick 事件附加到所有 link 具有 href 变量

Javascript attach an onclick event to all link with href variable

html

javascript

onclick