Question

<a onclick ="foo()" href="bar.html" >Link </a>

<script>

...
function foo(){
  //I want to know the href property of whoever called me.
  //something like this.caller.href ??
}

</script>

我想我可以只分配所有元素ID，然后将自己的ID传递给我正在调用的JS方法，但我一直在寻找更好的方法。

Answer 1

当浏览器调用函数作为DOM事件的结果时，JavaScript会将对象传递给包含该事件信息的该函数。但它在IE中的工作方式与其他方式略有不同。要在所有浏览器中使用，foo()应该使用参数*（我使用e）：

function foo(e) {
  var sender = (e && e.target) || (window.event && window.event.srcElement);
  //sender is the DOM element which was clicked
  alert(sender.href); //assumes the clicked element was an <a>
}

第一行将为“sender”分配在所有浏览器中发起事件的元素的值。

现在，如果您的<a> 包含子元素（例如，图片），并且其中一个那些是点击的实际元素，那么该元素将成为“发件人”。如果有可能，您需要从发件人处走DOM，直到找到您的链接：

function foo(e) {
  var sender = (e && e.target) || (window.event && window.event.srcElement);
  //sender is the DOM element which was clicked

  var myEle = sender;

  //find the parent node until we hit the <a>
  while(myEle.tagName.toUpperCase() != 'A') {
    myEle = myEle.parentNode;
  }

  //myEle is now the <a>. sender is still the originator.
  alert(myEle.href);
}

*您也可以使用arguments[]数组访问传递给函数的任何参数，即使它们未被声明也是如此。

Answer 2

<a onclick="foo(this)" href="bar.html">Link</a>

那么你的JavaScript就是：

function foo(ob) {
    alert(ob.href); //or whatever you want to happen preferably pass an id 
}

如果要将对象本身传递给函数，请使用“this”选择器。

Answer 3

这里的约定是 this 指的是调用处理程序的DOM元素。所以如果你想知道链接的href：

function foo () {
   // Inside foo this will refer to the DOM element if called as an event handler
   var href = this.href
}

这应该可以解决问题。

编辑：如果在DOM中明确地从onclick-handler调用foo，即

<a [...] onclick="foo()">

然后 this 的原始上下文将在foo中丢失。要修复此问题，可以将函数调用绑定到原始上下文：

<a [...] onclick="foo.call(this)">

Answer 4

您可以在调用函数时将href属性的值传递给函数：

<a href="http://www.example.com" onclick="foo(this.href)">link</a>

Answer 5

传递参数怎么样？

foo(id);

Answer 6

您不需要将元素作为参数传递给函数。你可以用

var a = event.srcElement;
alert(a.href);

我可以从Javascript方法中找出哪个\哪个DOM元素叫我？

6 个答案: