禁用外部库设置的事件侦听器

Question

在外部库的某个地方（当然，我无法更改），以这种方式创建了一个事件侦听器：

someElement.addEventListener('keydown', function(e) {
    whatever();
});

我需要摆脱这个监听器或以某种方式覆盖它。但似乎无法做到，因为我没有任何方法可以引用使用的匿名函数。

这不是唯一被删除的侦听器。卸下所有的keydown听众会也行，如果有可能。

我已经看到一个选项是克隆元素并替换它，但我不能这样做，因为有很多初始化，并且创建了很多其他事件侦听器。我只需要取消那个keydown。

有什么我可以做的吗？

Answer 1

您可以在捕获阶段侦听事件并停止其立即传播。

const input = document.querySelector('input')
const log = () => console.log('I shouldnt log')

input.addEventListener('keydown', e => {
  e.stopImmediatePropagation()
}, true)

input.addEventListener('keydown', log)

<input placeholder="Type here"/>

通过true作为第三参数的addEventListener监听在其捕获阶段时（或与选择的对象{ capture: true }。

但这是假设您有机会在要禁用的侦听器之前添加此侦听器，并且该元素没有任何内联侦听器。

否则，您可以将其包装成一个遵循相同概念的元素：

const disablers = document.querySelectorAll('[disable-event]')
const input = document.querySelector('input')
const log = () => console.log('I shouldnt log')

input.addEventListener('keydown', log)

disablers.forEach(disabler => {
  disabler.addEventListener(disabler.getAttribute('disable-event'), e => {
    e.stopPropagation()
  }, true)
})

<span disable-event="keydown">
  <input onkeydown="log()" placeholder="Type here"/>
</span>

这会停止父元素上的事件传播，因此它永远不会到达元素本身。