addEventListener不生效时如何在事件触发前拦截Enter键事件

根本原因 #

这个问题的核心是Facebook在输入框的上层稳定容器（甚至是document）上绑定了捕获阶段的keydown监听器，专门针对Enter键做了处理：监听到Enter事件后直接调用stopImmediatePropagation()终止后续所有同类型事件的传播，还会同步触发消息提交、替换整个输入框元素的逻辑。
你原来绑定在输入框本身的是冒泡阶段的事件监听器，优先级比上层捕获监听器低，还没等到事件冒泡到输入框你的回调就被阻断了，所以只有没被Facebook特殊拦截的其他按键能正常触发你的回调。

可行解决方案 #

按稳定性从高到低排序：

方案1：上层捕获监听（最推荐） #

直接把事件绑定到不会被替换的顶层节点（比如document），开启捕获模式，你的监听器会比Facebook的监听器更早触发，完全可以抢在它前面拦截Enter事件：

document.addEventListener('keydown', e => {
  // 仅当焦点在Messenger输入框、emoji选择器激活时才拦截
  if (
    e.key === 'Enter' &&
    isActive &&
    document.activeElement?.matches('div[contenteditable=true]')
  ) {
    e.preventDefault();
    e.stopImmediatePropagation();
    selectEmoji();
  }
}, true); // 第三个参数设为true开启捕获模式

这个方案不需要监听DOM变化，不管输入框怎么替换都能正常生效，维护成本最低。

方案2：覆盖输入框的onkeydown属性 #

DOM元素的onkeydown属性绑定的事件优先级高于所有addEventListener绑定的同类型事件，哪怕Facebook加了上层拦截也能优先触发。你可以用MutationObserver监听输入框的更新，每次新输入框生成后直接覆盖它的onkeydown属性：

let activeChatbox = null;
function bindEnterHandler() {
  const chatbox = document.querySelector('div[contenteditable=true]');
  // 避免重复绑定
  if (!chatbox || chatbox === activeChatbox) return;
  activeChatbox = chatbox;
  // 保留原有onkeydown逻辑
  const originalOnKeydown = chatbox.onkeydown;
  chatbox.onkeydown = function(e) {
    if (e.key === 'Enter' && isActive) {
      e.preventDefault();
      e.stopImmediatePropagation();
      selectEmoji();
      return false;
    }
    // 非拦截场景执行原有逻辑
    return originalOnKeydown?.apply(this, arguments);
  };
}
// 监听DOM变化自动绑定新输入框
const observer = new MutationObserver(bindEnterHandler);
observer.observe(document.body, { childList: true, subtree: true });
// 初始化绑定
bindEnterHandler();

方案3：监听beforeinput事件 #

Enter键触发换行/提交行为时会先触发beforeinput事件，这个事件很少有网站会做上层拦截，也可以用来实现你的需求：

document.addEventListener('beforeinput', e => {
  if (
    e.inputType === 'insertLineBreak' &&
    isActive &&
    e.target.matches('div[contenteditable=true]')
  ) {
    e.preventDefault();
    selectEmoji();
  }
}, true);

内容的提问来源于stack exchange，提问作者MortenMoulder