时间戳

首页 > 解决方案 > 禁用外部库设置的事件监听器

javascript - 禁用外部库设置的事件监听器

问题描述

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

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

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

没有必要这是唯一删除的侦听器。如果可能的话，删除所有keydown听众也可以。

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

有什么我可以做的吗？

标签： javascript

解决方案

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

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>

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

推荐阅读