如何覆盖内联onclick事件？

Question

这看起来似乎很简单。

如何使用JavaScript覆盖以下HTML中的onclick事件？

<a id="sample" href="..." onclick="alert('hello world')" />...</a>

我已经尝试使用jQuery，但那并没有成功：

$('#sample').attr('onclick','alert("done")')

假设HTML已经预先编写好且不能更改，除了可以使用JavaScript进行操作。

- Diodeus - James MacFarlane

Answer 1

试一下这个：

// Setting the DOM element's onclick to null removes 
// the inline click handler
$("#sample")[0].onclick = null;
$("#sample").click(function() { alert("done") });

- Andrew Hare

---

那很不明显，但它起作用了。谢谢Andrew。为什么要加上[0]？ - Diodeus - James MacFarlane

@Diodeus：jQuery对象与DOM集合或数组类似，每个包含的元素都有数字索引。[0]将获取选择器的第一个匹配元素。 - Andy E

我会认为，由于我是按ID选择，所以它应该是唯一的，永远不会导致数组。有时候，看似合乎逻辑的事情也可能是错误的。 - Diodeus - James MacFarlane

如果你需要匹配多个元素，可以使用以下方法来沉默它们的onclick事件：$('.datacell').each(function() {this.onclick = $.noop;});，这与我的情况类似。请注意，翻译内容不包括解释和额外信息。 - bPratik

“我会假设由于我是通过ID进行选择，所以它应该是唯一的” => 在这种特定情况下，[0] 的作用并不是限制选择，而是将格式从jQuery对象转换为DOM元素。 - Christophe

Answer 2

这也可以在没有jQuery的情况下完成：

document.getElementById("sample").setAttribute('onclick','alert("done")');

- supershnee

Answer 3

<a id="sample" href="..." onclick="alert('hello world'); return false;" />...</a>

或者

$('#sample').attr('onclick','alert("done"); return false;')

尽管可以直接在onclick中设置return false;，也可以使用jQuery进行设置，但实际上并不需要使用jQuery。好处是，如果由于某种原因您的jQuery脚本导致404错误，您的代码仍将正常工作。

我在这里找到了答案：这里。

- Ben Everard

---

哦，糟糕，我想我完全误解了你的问题！对不起，伙计 :S - Ben Everard

Answer 4

尝试：

document.getElementById("sample").onclick = $.noop;

$.noop == function(){};

jQuery noop

的汉语翻译是：

{{链接1：jQuery noop}}

。

- David Murdoch

---

$("#sample")[0].onclick = null; 和 document.getElementById("sample").onclick = $.noop; 几乎相同。你怎么能说这没有起作用？ - David Murdoch

我测试了一下，发现它能够满足我的需求（我没有测试它是否会覆盖属性，但很可能会）。 - Script Kitty