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

【问题标题】：Remove all listeners when focus is on contenteditable div当焦点在 contenteditable div 上时删除所有侦听器
【发布时间】：2019-12-19 12:28:06
【问题描述】：

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

我该怎么做？

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

【问题讨论】：

标签： javascript jquery dom contenteditable dom-events

【解决方案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>

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

【讨论】：