无法移除API的event listener，如何删除指定div区域内的所有事件监听器？

安全阿岳

2026-9-29

事件监听器移除失败的核心原因

代码存在语法逻辑错误：setTimeout的延迟参数1500被错误放到了html2canvas().then()的第二个参数位置，而非setTimeout的第二个入参，导致定时器立即执行，事件移除逻辑的执行时机不符合预期，可能出现事件还未绑定完成就执行移除、或多次绑定同一事件的问题。
第三方API若对事件绑定有特殊封装，会出现外部调用removeEventListener无法匹配到对应绑定实例的情况，属于这类API常见的兼容问题。

解决方案

方案1：用标志位绕过API移除异常（优先推荐，性能开销最低）

不需要强制移除监听器，新增状态变量控制处理函数是否执行即可，修改后代码如下：

// 新增状态控制变量
let subsceneListenerActive = true;
api.scene.addEventListener(api.scene.EVENTTYPE.SUBSCENE_PUBLISHED, myFunctionpicbir);
    
function myFunctionpicbir() {
  // 状态为关闭时直接跳过执行
  if (!subsceneListenerActive) return;
  alert("1")
  // 修正setTimeout参数位置错误
  setTimeout(function() {
    html2canvas($('#sdv-container-sky')[0], {
      x: 500,
      y: 0,
      height: 600,
      width: 900
    }).then(function(canvas) {
      document.getElementById('kumas_cizim').appendChild(canvas);
      // 不需要调用移除API，直接关闭状态即可
      subsceneListenerActive = false;
      myFunctiona();
    });
  }, 1500);
}

方案2：清空指定div的所有事件监听器

如果确实需要清理目标区域所有绑定的事件，可以通过克隆替换节点的方式实现，所有绑定在原节点上的事件监听器都会随原节点销毁：

// 替换为你需要清理事件的div ID
const targetDiv = document.getElementById('sdv-container-sky');
const clonedDiv = targetDiv.cloneNode(true);
targetDiv.parentNode.replaceChild(clonedDiv, targetDiv);