diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 9eac06a5e..48a558a36 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -12,6 +12,16 @@ import { resolve } from '@/router'; import { $i } from '@/account'; import { defaultStore } from '@/store'; +export let isScreenTouching = false; + +window.addEventListener('touchstart', () => { + isScreenTouching = true; +}, { passive: true }); + +window.addEventListener('touchend', () => { + isScreenTouching = false; +}, { passive: true }); + export const stream = markRaw(new Misskey.Stream(url, $i)); export const pendingApiRequestsCount = ref(0); diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts index 2c0c36400..89e6b1be9 100644 --- a/packages/client/src/scripts/use-tooltip.ts +++ b/packages/client/src/scripts/use-tooltip.ts @@ -1,3 +1,4 @@ +import { isScreenTouching } from '@/os'; import { Ref, ref } from 'vue'; export function useTooltip(onShow: (showing: Ref) => void) { @@ -10,6 +11,10 @@ export function useTooltip(onShow: (showing: Ref) => void) { close(); if (!isHovering) return; + // iOS(Androidも?)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策 + // これが無いと、画面に触れてないのにツールチップが出たりしてしまう + if (!isScreenTouching) return; + const showing = ref(true); onShow(showing); changeShowingState = () => {