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

我正在尝试使用"外部链接"类向我的所有链接添加一个onclick函数。所以我成功地完成了它并做了一个测试，每当我单击一个时，它都会提醒"它可以工作"，但是如何将该链接的 href 返回到函数中？我想在它说"http://www.example.com"的地方加入那个变量。我尝试了元素[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;
    }
}

您的 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;
    }
}

你有没有考虑过使用 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>

资源：

j查询教程 1
j查询教程 2

相关内容

最新更新

热门标签：