javascript - 当 addEventListener 不起作用时，在它触发之前拦截事件

Question

我一直在维护一个用 React 编写的小项目。这是一个浏览器扩展，为 Facebook Messenger 添加了类似 Slack 的表情符号支持。由于 Facebook 偶尔会进行更改，因此我需要对浏览器扩展进行新的更改，以便它们像以前一样工作。

Facebook 使用属性设置为 true<div>的a。contenteditable从我记事起，他们就已经这样做了。但是，他们改变了一些东西，因为我曾经能够做到：

document.querySelector("div[contenteditable=true]").addEventListener(e => {
    if(e.key == "Enter" && isActive) { //isActive means if the emoji picker is visible or not
        e.preventDefault();
        e.stopPropagation();
        selectEmoji();
    }
});

但是，即使元素存在，该事件也不再触发。它会触发除 Enter 之外的每个键。所以我开始使用 MutationObserver 进行挖掘，令我惊讶的是，我注意到了这一点：

removedNodes: NodeList[<div with contenteditable=true>]
addedNodes: NodeList[NEW <div with contenteditable=true>]

因此，一旦我按 Enter 键，Facebook 就会发送消息，然后用新的聊天框元素替换整个“聊天框”元素（带有 contenteditable=true 的 div）。

我不明白的是，当我按下 Enter 键时，我的 addEventListener 没有触发。即使我做这样的事情，它也行不通：

setInterval(() => {
    var chatbox = document.querySelector("div[contenteditable=true]");
    chatbox.addEventListener("keydown", () => ........ });
}, 1000);

即使 Facebook 正在删除该元素，我的事件也不应该触发吗？根据我在这里的测试，它应该触发（至少是第一次）：https ://jsfiddle.net/web4dyg1/

由于添加了一个事件监听器，然后取消 Facebook 的请求（以前的表单提交），不再起作用，我还有什么其他选择？我知道这个问题真的很小众，但我希望有人有一个开箱即用的想法。

编辑：我需要澄清添加事件侦听器是有效的。每次按键都会触发事件，但 Enter 键除外。

标签： javascriptdom-eventsbrowser-extension