diff options
Diffstat (limited to 'packages/client/src/scripts')
| -rw-r--r-- | packages/client/src/scripts/is-device-touch.ts | 1 | ||||
| -rw-r--r-- | packages/client/src/scripts/touch.ts | 19 | ||||
| -rw-r--r-- | packages/client/src/scripts/use-tooltip.ts | 5 |
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); |