如何确定哪个链接被点击了？

Question

如何获取所点击链接的引用以删除正确的行？

<tr>
<td>c1r1</td>
<td>c2r1</td>
<td><a href="javascript:delete_row();">delete</a></td>
</tr>

<tr>
<td>c1r2</td>
<td>c2r2</td>
<td><a href="javascript:delete_row();">delete</a></td>
</tr>

function delete_row() {
    this.parent().parent().remove();
}

我知道我可以使用 (在jquery中)

$('a').click(function() {
    this.parent().parent().remove();
}

甚至还有这个

$('a').live('click', function() {
    this.parent().parent().remove();
});

将函数绑定到动态创建的链接上。

但是我正在寻找一种不用jquery获取被点击链接引用的方法。我在函数内部使用jquery，但这不是重点。

编辑许多人建议在函数中使用this作为参数，我已经尝试过了，但它返回的是window：

<a href="javascript:delete_row(this);">delete</a>

function delete_row(elem) {
    console.log(elem);
}

Firebug console: Window config_maker.php

- Majid Fouladpour

Answer 1

与所有其他答案相反，在这种情况下，您不能传递 this，因为那将会引用 window 对象而不是链接对象。为什么？因为您没有使用事件处理程序，而是使用了 javascript: 协议。不要使用它来调用您的函数，而是改用事件处理程序。将您的链接更改为以下内容即可解决问题...

<a href="javascript:void(0);" onclick="delete_row(this);">delete</a>

这仍然远离理想状态，因为不显眼的JavaScript是现在应该采用的方式。但这至少可以让你的代码工作。

- Josh Stodola

---

+1 对于最后（不显眼的）评论，我真心希望它能成为 JavaScript 上下文中的公理。 - Mark Schultheiss

@Mark没错，相信我，当我输入了javascript:void(0);时，我也感到非常不舒服。这已经是很长时间以来的事情了！ - Josh Stodola

谢谢！我记得在 jQuery 的早期阶段看到过一个教程，它涉及到了 target 并且不知怎么地发现了 a，但是我现在找不到它了。 - Majid Fouladpour

@Majid，是的，这也是可能的，使用event.target，但即便如此，您仍会遇到跨浏览器问题，因为IE将其称为srcElement而不是target！ - Josh Stodola

你如何在不显眼的JavaScript中处理href字段？我总是使用javascript:void(0);，因为#会倾向于将你带到页面顶部。 - Jess

Answer 2

你可以使用this来传递引用。

<a href="javascript:delete_row(this);">

- Teja Kantamneni

---

我尝试过了，但它仍然返回 window。 - Majid Fouladpour

尝试使用onclick，我很确定这将指向链接。 - Bart van Heukelom

@Majid，这里的this确实是指的window。请参考我的答案，了解详细解释和解决方法。 - Josh Stodola

Answer 3

<tr id='row1'><td><a rel="row1" href="javascript:delete_row('row1');">delete</a></td></tr>

<tr id='row2'><td><a rel="row2" href="javascript:delete_row(this.rel);">delete</a></td></tr>

...

function delete_row(varID) {
document.getElementById(varID).remove();

}

或者

function delete_row(varID) {
$('#'+varID).remove();

}

- FatherStorm

Answer 4

这可能会对您有所帮助

document.addEventListener("click", listener);
function listener(event){
     if(event.target.nodeType != 'a') return false;
     document.remove(event.target.parentNode.parentNode);
}

- Anoop

Answer 5

使用this。

<a href="javascript:delete_row(this);">

- Julio Santos

Answer 6

你不能只是使用this作为函数的参数吗？

<a href="javascript:delete_row(this);">xxx</a>

在Javascript中：

function delete_row(clickedLink) {
    ...
}

- Romain Linsolas

Answer 7

使用...

function delete_row(link) {
    link.parent().parent().remove();
}

然后调用javascript:delete_row(this);

- Simon Lee

Answer 8

在处理程序函数内部检查 this 对象

使用： this.id

- Mahmoud Farahat