fix: detach DOM widget event listeners on widget removal (#11724)

## Summary

Fixes leaked event listeners

## Changes

- **What**: 
- update all listeners to use AbortController to signal removal on
widget remove

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11724-fix-detach-DOM-widget-event-listeners-on-widget-removal-3506d73d3650811dae81c034c1098759)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/composables/node/useNodeAnimatedImage.ts

@@ -1,3 +1,4 @@
+import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
@@ -39,17 +40,20 @@ export function useNodeAnimatedImage() {
       const { handleWheel, handlePointer, forwardEventToCanvas } =
         useCanvasInteractions()
       node.imgs[0].style.pointerEvents = 'none'
-      element.addEventListener('wheel', handleWheel)
-      element.addEventListener('pointermove', handlePointer)
-      element.addEventListener('pointerup', handlePointer)
+      const controller = new AbortController()
+      const { signal } = controller
+      element.addEventListener('wheel', handleWheel, { signal })
+      element.addEventListener('pointermove', handlePointer, { signal })
+      element.addEventListener('pointerup', handlePointer, { signal })
       element.addEventListener(
         'pointerdown',
-        (e) => {
-          return e.button !== 2 ? handlePointer(e) : forwardEventToCanvas(e)
-        },
-        true
+        (e) => (e.button !== 2 ? handlePointer(e) : forwardEventToCanvas(e)),
+        { capture: true, signal }
       )
 
+      widget.onRemove = useChainCallback(widget.onRemove, () => {
+        controller.abort()
+      })
       widget.serialize = false
       widget.serializeValue = () => undefined
     }