在userscript中克隆EventListener

EventListener cloning in userscript

本文关键字:EventListener userscript      更新时间:2023-09-26

我有这个函数:

function main() {
    var bottomArea = document.getElementsByClassName("bottom-area");
    for (var i = 0; i < bottomArea.length; i++) {
        var showDialogLink = document.createElement("a");
        showDialogLink.innerHTML = "link";
        showDialogLink.onclick = function(){showSelect(this);return false;};
        bottomArea[i].insertBefore(showDialogLink, bottomArea[i].childNodes[3]);
    }
}
到目前为止,代码工作得很好。当我点击新创建的链接时,它会调用showSelect(this)函数。

问题是有另一个用户脚本/浏览器扩展(我没有访问-它不是我的),它基本上克隆整个另一个div,其中'底部区域'div嵌套。这也很好,但问题是它不克隆我的函数触发器和那些新克隆的实例(我不确定它们的性质是什么)链接不再触发showSelect(This)函数。只有我的userscript创建的第一个文件可以。

是否有一些方法,我应该在我的链接上添加我的功能触发器,即使克隆/复制后也会保留?

编辑:我将编辑显示html树:这是开头:

<div>
<div class="bottom-area"></div>
</div>

我的userscript在'a'标签上添加了一个带有onclick eventlistener的链接:

<div>
<div class="bottom-area"><a>link</a></div>
</div>

其他userscript基本上克隆它(有一个文本区域内的div和它的值被克隆),但没有事件监听器,所以点击克隆链接不再触发我的功能。

EDIT2:如果有帮助的话,我创建的用户脚本是reddit用户脚本。我在评论中添加了一个小功能,并在评论文本字段下的"reddiquette"链接旁边添加了一个链接。这与预生成的文本字段一起工作。然而,当我点击"回复"下的评论树,整个div连同文本字段,提交按钮和我的链接得到克隆下的评论,我也在回复,但我的链接不再有自己的功能触发。

最简单的解决方案可能是简单地使用HTML事件属性(而不是addEventListener),例如<a onclick="dostuff();">link</a>,因为在"克隆"期间应该保留该属性。请看下面的例子(在Firefox 40中进行了测试)。

让onclick属性中的代码与用户脚本交互可能有点困难,因为它运行在不同的JavaScript环境中。幸运的是,有很多可能的解决方案,这取决于您的确切需求。