时间戳

首页 > 解决方案 > 当焦点在 contenteditable div 上时删除所有侦听器

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

问题描述

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

我该怎么做呢？

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

标签： javascriptjquerydomcontenteditabledom-events

解决方案

在侦听器内部，当事件被触发时，检查是否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>

请注意，这不是删除侦听器 - 而是将逻辑编程到侦听器中以忽略某些事件，这可能比删除和重新附加侦听器本身要容易得多。

推荐阅读