如何在无法获取函数引用时仅移除元素的点击事件并保留其他事件？

该需求完全可以实现，推荐使用事件捕获阶段拦截的方案，无需获取原事件处理函数引用，也不会影响其他类型事件的执行。

实现原理 #

DOM事件流分为捕获阶段、目标阶段、冒泡阶段三个阶段，默认通过addEventListener绑定的事件均在冒泡阶段执行。我们只需给目标元素绑定一个捕获阶段优先触发的click事件监听器，在监听器内终止事件传播即可拦截原有click事件的执行。

实现代码 #

在你标注的代码位置插入以下代码即可：

button.addEventListener('click', e => e.stopImmediatePropagation(), true);

第三个参数设为true即代表该监听器在捕获阶段触发，stopImmediatePropagation()会直接终止后续所有同类型事件的执行。如果需要同时阻止点击的默认行为，可额外补充e.preventDefault()。

效果验证 #

修改后的完整可运行代码如下：

const button = document.querySelector('button');

(() => {
  button.addEventListener('click', () => console.log('clicked'));
  button.addEventListener('mouseover', () => console.log('hovering'));
})();

// 新增拦截逻辑
button.addEventListener('click', e => e.stopImmediatePropagation(), true);

<button>Click Me</button>

测试效果：鼠标悬停按钮时控制台正常输出hovering，点击按钮时不会输出clicked，完全符合需求。

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