Twitter 时间轴 DOM 操作 - 否定 Onclick 事件处理程序答案

【问题标题】：Twitter Timeline DOM Manipulation - Negating Onclick Event HandlerTwitter 时间轴 DOM 操作 - 否定 Onclick 事件处理程序
【发布时间】：2011-09-15 00:12:12
【问题描述】：

我正在创建一个浏览器扩展程序，它通过向用户 Twitter 时间线中的每个推文行添加一些链接来修改 Twitter 时间线。

通常，每当点击推文行时，Twitter 都会弹出右侧面板并显示更多信息，除非用户点击转推、回复等链接。我不确定 Twitter 的 JavaScript 对这些应用了什么链接以防止它们导致面板打开，但我想做类似的事情。我已尝试检查 Google Chrome 中的元素，但未显示事件处理程序。

有什么建议吗？

【问题讨论】：

标签： javascript jquery dom twitter dom-events

【解决方案1】：

事件处理程序可能是通过脚本以编程方式添加的。您可以尝试删除事件处理程序（请参阅the docs），但克隆有问题的元素然后隐藏原始元素可能更容易。有关信息，请参阅 cloneNode 文档。

没有任何示例 html，我真的不能给你一个很好的例子，但这是我拼凑的一个通用 jsFiddle 来演示这个概念：http://jsfiddle.net/sacCK/1/

【讨论】：

我很确定他们的脚本没有向我插入的 DOM 元素添加事件处理程序。更大的问题是，无论用户在何处单击推文行都会导致面板打开（链接除外）。我想复制它们的链接功能的方式，这样它们就不会在单击时导致面板打开。我认为事件处理程序位于外部容器上（包含所有推文文本等），因此可能正在调用事件处理程序，但链接上的处理程序会阻止面板打开。

【解决方案2】：

我通过停止事件传播解决了我的问题。这阻止了事件传播到容器元素的事件处理程序。

使用 jQuery，我可以像这样应用 onclick 处理程序：

$("#elementId").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    // other actions
});

【讨论】：

我建议您研究非 jQuery 方法来执行此操作 - 除非您已经计划在扩展中使用 jQuery。我不会。 :)
@Chris: jQuery 在整个扩展中用于几件事。您说得对，仅此案例并不能真正保证使用它。
请务必接受您自己的答案，因为已经过了足够的时间。