Question

在外部库的某个位置（当然，我不能更改），通过以下方式创建事件监听器：

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

我需要摆脱此侦听器或以某种方式覆盖它。但是似乎无法完成，因为我没有任何方法可以引用所使用的匿名函数。

这不是唯一删除的侦听器。如果可能的话，删除 ALL keydown侦听器也可以。

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

我能做些什么吗？

Answer 1

您可以在capture phase中监听事件，并停止事件的即时传播。

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的{{3}}传递来侦听捕获阶段的事件（或带有{ 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>

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

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

1 个答案: