Question

我正在尝试使用＆＃34; external-link＆＃34;类为我的所有链接添加onclick功能。所以我成功完成了它并进行了测试，无论何时我点击一个它都会发出警告＆＃34;它可以正常运行＆＃34;但是如何将该链接的href返回到函数中？我想把这个变量放在＆＃34; http://www.example.com＆＃34;中。我尝试了元素[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回调的上下文将是点击的链接，因此您只需使用'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事件附加到href变量的所有链接

2 个答案: