From fbe4869d1ed336d3fb7d08d3d2f75710eb0fb1a4 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 5 Dec 2021 13:10:19 +0900 Subject: fix(client): タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/src/scripts/is-device-touch.ts | 1 - packages/client/src/scripts/touch.ts | 19 +++++++++++++++++++ packages/client/src/scripts/use-tooltip.ts | 5 ++--- 3 files changed, 21 insertions(+), 4 deletions(-) delete mode 100644 packages/client/src/scripts/is-device-touch.ts create mode 100644 packages/client/src/scripts/touch.ts (limited to 'packages/client/src/scripts') 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) => void) { let isHovering = false; @@ -14,7 +13,7 @@ export function useTooltip(onShow: (showing: Ref) => void) { // iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策 // これが無いと、画面に触れてないのにツールチップが出たりしてしまう - if (isDeviceTouch && !isScreenTouching) return; + if (isTouchUsing && !isScreenTouching) return; const showing = ref(true); onShow(showing); -- cgit v1.2.3-freya