Event Listeners面板可快速定位未释放监听器，需检查是否该存在、展开Ancestors查看代理监听，识别Passive、绑定于已移除父容器、重复匿名函数三类风险信号，并通过断点或手动删除验证，最后在代码中配对清理。
直接打开 Event Listeners 面板看谁还“挂着”，比猜逻辑快得多。重点不是找有没有监听器，而是确认它该不该还在。
定位目标元素并展开监听链
在 Elements 面板中选中你怀疑有问题的 DOM 元素（比如按钮、列表项或容器），右侧切换到
Event Listeners
标签页。点击事件类型（如
click
、
scroll
）前的三角箭头展开。务必开启右上角的
Ancestors
开关——它会显示从目标元素到 document 根的所有祖先节点上绑定的监听器，包括框架自动挂载的代理监听（常标有
Framework listeners
）。
识别危险监听器的三个信号
以下情况高度提示监听器未释放：
监听器旁显示
Passive
：说明它无法调用
，但若你本意是阻止默认行为，可能误判为“没触发”
监听器绑定在已移除的父容器上（如
或
），而你当前操作的元素早已脱离文档树
同一事件类型下出现多个匿名函数或箭头函数条目，尤其在反复开关组件后数量递增
快速验证是否残留
回到 Elements 面板，右键目标元素 →
Break on
→
attribute modifications
，然后执行一次销毁操作（如关闭弹窗、切换路由）。如果断点被触发，说明仍有代码在尝试修改该元素属性——往往意味着监听器或副作用未清理。更直接的方法：在 Event Listeners 面板里逐个点击监听器右侧的垃圾桶图标（⚠️仅限开发环境），从最外层容器开始删，删完刷新再点，行为恢复即定位成功。
关联代码清理建议
看到残留监听器后，不要只删面板里的条目，要回代码补上清理逻辑：
原生 JS：确保
和
使用**同一个函数引用**；避免用箭头函数或内联函数绑定
React：在
返回函数中解绑，或用
统一控制
Vue：在
或
钩子中调用
全局或模块级监听（如
）：必须配对清理，不能依赖页面卸载
e.preventDefault()#modal-overlay.page-wrapperaddEventListenerremoveEventListeneruseEffectAbortController.signalonBeforeUnmountbeforeDestroyremoveEventListenerwindow.addEventListener