如何移除按钮的EventListener？点击移除按钮后阻止弹窗触发

要成功移除hihi-toggle按钮的click事件监听器，核心要求是**removeEventListener必须使用与addEventListener完全相同的函数引用**。你原来的代码用了匿名箭头函数作为事件处理程序，这会导致移除操作失效——因为每次创建的匿名函数都是独立的实例，引用地址不匹配，removeEventListener找不到对应的监听器。

修改后的完整代码： #

JavaScript 部分

// 定义命名的事件处理函数
function showAlert(e) {
  alert("I am Jim");
}

// 绑定监听器时使用这个命名函数
document.querySelector('#hihi-toggle').addEventListener('click', showAlert);

function remove_event_listener_button() {
  // 移除监听器时，传入相同的事件类型和函数引用
  document.querySelector('#hihi-toggle').removeEventListener('click', showAlert);
}

HTML 部分

<button id="hihi-toggle" data-enabled="false">Alert Box </button>
<button onclick="remove_event_listener_button()">Remove Listener to prevent it from triggering pop_up</button>

关键说明： #

• 将匿名箭头函数提取为命名函数showAlert，确保绑定和移除监听器时使用的是同一个函数引用。
• 调用removeEventListener时，必须指定和绑定阶段完全一致的事件类型（这里是'click'）以及对应的函数引用，才能准确匹配并移除目标监听器。

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