当焦点在 contenteditable div 上时删除所有侦听器

Posted 2023-05-09

【中文标题】当焦点在 contenteditable div 上时删除所有侦听器

【英文标题】：Remove all listeners when focus is on contenteditable div

【发布时间】：2019-12-19 12:28:06

【问题描述】：

我的页面上有多个 keydown 和 keyup 监听器。当焦点位于特定的 contenteditable div 上时，我想禁用这些事件。

我该怎么做？

例如，点击空格会暂停我的视频，但我不希望在编辑 contenteditable div 时触发它。

【参考方案1】：

在监听器内部，当事件被触发时，检查event.target 是否有 contenteditable div 的祖先，您想忽略其事件。例如：

window.addEventListener('keydown', ( target ) => 
  if (target.closest('#noevent')) 
    // event was fired on an element which is, or is a descendant 
    // of the noevent element
    // so, stop execution of the listener
    return;
  
  console.log('listener function continuing...', Date.now());
);

<div>normal content</div>
<div contenteditable>editable content</div>
<div contenteditable id="noevent">editable content which will not trigger listener</div>

请注意，这不是移除监听器 - 而是编程逻辑进入监听器以忽略某些事件，这可能比移除和重新附加听众自己。