无法移除所有事件监听器？求网页事件监听器的有效移除方法

你说得完全对——问题就出在匿名函数的引用不一致上。removeEventListener要求传入的函数必须和addEventListener时用的是同一个内存引用，而你每次写function(ev){ev.preventDefault()}都是创建一个全新的函数，浏览器自然认不出来，所以移除失败。至于直接给getEventListeners(document).contextmenu赋值null，这也没用，因为getEventListeners返回的是一个只读的视图对象，修改它不会影响实际绑定的事件。

下面给你几个实用的解决方案，从针对性到通用型都有：

一、针对右键菜单的快速解决方法 #

既然目标只是恢复右键菜单，不一定非要移除那个监听器，你可以绑定一个优先级更高的监听器，阻止原监听器执行：

document.addEventListener('contextmenu', function(ev) {
  ev.stopImmediatePropagation(); // 阻止后续同类型监听器执行
}, true); // 这里的true表示在捕获阶段触发，比冒泡阶段的原监听器更早执行

这样你的新监听器会先触发，直接终止事件传播，原有的阻止右键的监听器就不会被调用了，右键菜单自然就能正常弹出。

二、通用移除document上所有事件监听器的方法（仅控制台可用） #

如果你需要清空document上的所有事件监听器，可以利用Chrome DevTools提供的getEventListenersAPI（注意：这是非标准API，只能在浏览器控制台里用，不能写到生产代码中）：

// 遍历document上所有绑定的事件类型
Object.keys(getEventListeners(document)).forEach(eventType => {
  // 移除该事件类型下的所有监听器
  getEventListeners(document)[eventType].forEach(listener => {
    document.removeEventListener(eventType, listener.listener, listener.useCapture);
  });
});

这个方法会拿到每个监听器的原始引用，所以能精准移除所有绑定的事件。

三、普通元素清空事件监听器的通用方法（不适用于document） #

如果是普通DOM元素（比如div、button），可以通过克隆元素并替换原元素的方式清空所有事件监听器：

const target = document.querySelector('#your-element');
const cloned = target.cloneNode(true); // true表示克隆所有子元素
target.parentNode.replaceChild(cloned, target);

克隆出来的元素不会继承原元素的事件监听器，相当于重置了元素的事件绑定状态。不过这个方法对document、body这类根元素不太适用，容易引发其他问题。

最后再提醒一下：如果是自己写的代码，建议尽量不要用匿名函数绑定事件，最好把函数存成变量，这样后续移除会方便很多，比如：

// 绑定的时候存函数引用
const preventContextMenu = (ev) => ev.preventDefault();
document.addEventListener('contextmenu', preventContextMenu);

// 移除的时候直接用这个引用
document.removeEventListener('contextmenu', preventContextMenu);

内容的提问来源于stack exchange，提问作者E235