diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index 59c06213e4..70d55b7456 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -216,7 +216,6 @@ const resolution = computed<number>(() => resolutionRaw.value ?? resolutionAutoV
 const useVirtualJoystick = true;
 
 const wasdVec = { x: 0, y: 0 };
-const pointerVec = { x: 0, y: 0 };
 let isDashing = false;
 
 const joyStickRadiusPx = 100;
@@ -381,51 +380,6 @@ onMounted(async () => {
 		}
 	});
 
-	canvas.value!.addEventListener('pointerdown', (ev) => {
-		pointerVec.x = ev.clientX;
-		pointerVec.y = ev.clientY;
-
-		let timeoutId: number | null = null;
-
-		const onMove = (ev: PointerEvent) => {
-			if (timeoutId != null) {
-				window.clearTimeout(timeoutId);
-				timeoutId = null;
-			}
-
-			const before = pointerVec;
-			const after = { x: ev.clientX, y: ev.clientY };
-
-			controller.setCameraRotateVector({
-				x: after.x - before.x,
-				y: after.y - before.y,
-			});
-
-			pointerVec.x = after.x;
-			pointerVec.y = after.y;
-
-			timeoutId = window.setTimeout(() => {
-				timeoutId = null;
-
-				controller.setCameraRotateVector({
-					x: 0,
-					y: 0,
-				});
-			}, 10);
-		};
-
-		canvas.value!.addEventListener('pointermove', onMove);
-
-		canvas.value!.addEventListener('pointerup', (ev) => {
-			canvas.value!.removeEventListener('pointermove', onMove);
-
-			pointerVec.x = 0;
-			pointerVec.y = 0;
-
-			controller.setCameraRotateVector(pointerVec);
-		});
-	});
-
 	watch([graphicsQuality, fps, resolution], () => {
 		refresh();
 	});
diff --git a/packages/frontend/src/world/room/controller.ts b/packages/frontend/src/world/room/controller.ts
index 630cc05475..d58887bb7f 100644
--- a/packages/frontend/src/world/room/controller.ts
+++ b/packages/frontend/src/world/room/controller.ts
@@ -188,8 +188,60 @@ export class RoomController {
 	}
 
 	private onCanvasPointerdown(ev: PointerEvent) {
+		ev.preventDefault();
+		ev.stopPropagation();
+
 		this.pointerDownPosition = { x: ev.offsetX, y: ev.offsetY };
 		this.canvas!.setPointerCapture(ev.pointerId);
+
+		const pointerVec = { x: ev.clientX, y: ev.clientY };
+
+		let timeoutId: number | null = null;
+
+		const onMove = (ev: PointerEvent) => {
+			ev.preventDefault();
+			ev.stopPropagation();
+
+			if (timeoutId != null) {
+				window.clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+
+			const before = pointerVec;
+			const after = { x: ev.clientX, y: ev.clientY };
+
+			this.setCameraRotateVector({
+				x: after.x - before.x,
+				y: after.y - before.y,
+			});
+
+			pointerVec.x = after.x;
+			pointerVec.y = after.y;
+
+			timeoutId = window.setTimeout(() => {
+				timeoutId = null;
+
+				this.setCameraRotateVector({
+					x: 0,
+					y: 0,
+				});
+			}, 10);
+
+			return false;
+		};
+
+		this.canvas!.addEventListener('pointermove', onMove);
+
+		this.canvas!.addEventListener('pointerup', (ev) => {
+			this.canvas!.removeEventListener('pointermove', onMove);
+
+			pointerVec.x = 0;
+			pointerVec.y = 0;
+
+			this.setCameraRotateVector(pointerVec);
+		}, { once: true });
+
+		return false;
 	}
 
 	private onCanvasPointerup(ev: PointerEvent) {