fix(frontend): イベントリスナーが解除されない問題 (misskey-dev#232)

cffnpwr · Jun 13, 2024 · a1bd8a1 · a1bd8a1
1 parent 0aae1b9
commit a1bd8a1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
@@ -64,19 +64,14 @@ const minHeight = 50;
 const minWidth = 250;
 
 function dragListen(fn: (ev: MouseEvent | TouchEvent) => void) {
-	window.addEventListener('mousemove', fn, { passive: true });
-	window.addEventListener('touchmove', fn, { passive: true });
-	window.addEventListener('mouseleave', dragClear.bind(null, fn), { passive: true });
-	window.addEventListener('mouseup', dragClear.bind(null, fn), { passive: true });
-	window.addEventListener('touchend', dragClear.bind(null, fn), { passive: true });
-}
-
-function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('touchmove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-	window.removeEventListener('touchend', dragClear);
+	const controller = new AbortController();
+	const { signal } = controller;
+
+	window.addEventListener('mousemove', fn, { passive: true, signal });
+	window.addEventListener('touchmove', fn, { passive: true, signal });
+	window.addEventListener('mouseleave', () => controller.abort(), { passive: true, signal });
+	window.addEventListener('mouseup', () => controller.abort(), { passive: true, signal });
+	window.addEventListener('touchend', () => controller.abort(), { passive: true, signal });
 }
 
 const props = withDefaults(defineProps<{

diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.vue b/packages/frontend/src/widgets/WidgetActivity.chart.vue
@@ -53,16 +53,13 @@ const pointsReply = ref<string>();
 const pointsRenote = ref<string>();
 const pointsTotal = ref<string>();
 
-function dragListen(fn) {
-	window.addEventListener('mousemove', fn, { passive: true });
-	window.addEventListener('mouseleave', dragClear.bind(null, fn), { passive: true });
-	window.addEventListener('mouseup', dragClear.bind(null, fn), { passive: true });
-}
+function dragListen(fn: (ev: MouseEvent) => void) {
+	const controller = new AbortController();
+	const { signal } = controller;
 
-function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
+	window.addEventListener('mousemove', fn, { passive: true, signal });
+	window.addEventListener('mouseleave', () => controller.abort(), { passive: true, signal });
+	window.addEventListener('mouseup', () => controller.abort(), { passive: true, signal });
 }
 
 function onMousedown(ev) {