fix(client): タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正

3 files changed, 21 insertions, 4 deletions

diff --git a/packages/client/src/scripts/is-device-touch.ts b/packages/client/src/scripts/is-device-touch.ts
deleted file mode 100644
index 3f0bfefed2..0000000000
--- a/packages/client/src/scripts/is-device-touch.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isDeviceTouch = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
new file mode 100644
index 0000000000..06b4f8b2ed
--- /dev/null
+++ b/packages/client/src/scripts/touch.ts
@@ -0,0 +1,19 @@
+const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
+
+export let isTouchUsing = false;
+
+export let isScreenTouching = false;
+
+if (isTouchSupported) {
+	window.addEventListener('touchstart', () => {
+		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
+		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
+		isTouchUsing = true;
+
+		isScreenTouching = true;
+	}, { passive: true });
+	
+	window.addEventListener('touchend', () => {
+		isScreenTouching = false;
+	}, { passive: true });
+}
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index a9bf6d93db..b88075cdb0 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,6 +1,5 @@
-import { isScreenTouching } from '@/os';
 import { Ref, ref } from 'vue';
-import { isDeviceTouch } from './is-device-touch';
+import { isScreenTouching, isTouchUsing } from './touch';
 
 export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 	let isHovering = false;
@@ -14,7 +13,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 
 		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
 		// これが無いと、画面に触れてないのにツールチップが出たりしてしまう
-		if (isDeviceTouch && !isScreenTouching) return;
+		if (isTouchUsing && !isScreenTouching) return;
 
 		const showing = ref(true);
 		onShow(showing);