Question

使用内联事件作为属性我可以使用this关键字将当前对象传递给函数。我怎么能通过Javascript调用它作为href。

以下示例清除问题：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script>
function foo(ob){
  alert(ob.innerText);
}
</script>
</head>
<body>
   <a href="#" onclick="foo(this)">On Click Call</a> Works Fine!
   <br />
   <br />
   <a href="javascript:foo(this)">Javascript linked</a> Does not work.
</body>
</html>

结帐Demo

Answer 1

通常，出于可维护性原因，避免将JavaScript直接放入href属性是一个好主意。所以我不推荐这种方法。但是，如果你因某种原因确实需要走这条路......

通过href属性调用JavaScript时，this的值为window。为了获得被点击的元素，一个（有点kludgy）解决方案是为它分配一个id属性，您可以使用它来选择它。

<a id="js-linked" href="javascript:foo(document.getElementById('js-linked'));">Javascript linked</a>

正如您所看到的，这有点难以阅读。使用onclick属性可以使事物更清晰，更易于维护，因为this被赋予了被点击元素的值。完全避免使用内联JS并在隔离代码中附加click侦听器可能会使事情更清晰，更易于维护。

Answer 2

通常最好使用Unobstrusive Javascript的原则，而不是将事件处理程序放在HTML中。

然后，当您使用.addEventListener()安装事件处理程序时，this的值将自动设置为导致该事件的对象。

以下是如何运作的：

!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
   <a href="#" id="call">On Click Call</a> Works Fine!
<script>
document.getElementById("call").addEventListener("click", function(e) {
    e.preventDefault();
    alert(this.textContent);
});
</script>
</body>
</html>

所做的更改：

将<script>标记移至内容之后，以便在脚本运行时加载DOM元素。
向目标链接添加唯一ID值
使用document.getElementById()获取目标链接对象
将事件处理程序移出HTML并进入脚本，然后使用.addEventListener()添加事件处理程序。
使用this来引用事件处理程序中单击的链接。

Answer 3

在javascript:foo(this) this中引用Window对象。

使用javascript伪协议时，您没有对被点击元素的引用，因此无效。

如何将对象从javascript传递给函数调用为href

3 个答案: