change(frontend): 長押しのコンテキストメニューを無効にする

taiyme · May 24, 2024 · 37f9e53 · 37f9e53
1 parent bd1825e
commit 37f9e53
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
@@ -100,6 +100,35 @@ export async function common(createVue: () => App<Element>) {
 	// タッチデバイスでCSSの:hoverを機能させる
 	document.addEventListener('touchend', () => {}, { passive: true });
 
+	//#region 長押しのコンテキストメニューを無効にする
+	let touching = false;
+	let timer: number | null = null;
+	const onTouchStart = () => {
+		timer = window.setTimeout(() => {
+			touching = true;
+		}, 100);
+	};
+	const onTouchEnd = () => {
+		if (timer != null) {
+			window.clearTimeout(timer);
+			timer = null;
+		}
+		touching = false;
+	};
+	const onContextMenu = (ev: MouseEvent) => {
+		if (touching) {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+		onTouchEnd();
+	};
+	document.addEventListener('touchstart', onTouchStart, { passive: true, capture: true });
+	document.addEventListener('touchend', onTouchEnd, { passive: true, capture: true });
+	document.addEventListener('touchcancel', onTouchEnd, { passive: true, capture: true });
+	document.addEventListener('click', onTouchEnd, { passive: true, capture: true });
+	document.addEventListener('contextmenu', onContextMenu, { passive: false, capture: true });
+	//#endregion
+
 	// 一斉リロード
 	reloadChannel.addEventListener('message', path => {
 		if (path !== null) location.href = path;