Javascript 为什么会为无关元素触发此单击事件？

我正在处理此工具提示，如果将鼠标悬停在上面，它将显示工具提示：

但是，如果你（用手指）点击它，它将显示全屏（用于移动支持）：

代码如下所示：

export default function Tooltip({ message, children }: Props) {
    const [showSmallTip, setShowSmallTip] = useState(false);
    const [showBigTap, setShowBigTip] = useState(false);
    const ref = useRef(null);
    const pos = useBoundingBox(ref);

    const handleMouseEnter = useCallback(() => {
        setShowSmallTip(true);
    }, [setShowSmallTip]);

    const handleMouseLeave = useCallback(() => {
        setShowSmallTip(false);
    }, [setShowSmallTip]);

    const handleTap = useCallback(() => {
        console.log("TAP!")
        setShowBigTip(true);
        setShowSmallTip(false);
    }, [setShowBigTip]);

    const closeFullscreen = useCallback((ev:MouseEvent<HTMLElement>) => {
        console.log('CLOSE!!!')
        ev.stopPropagation();
        setShowBigTip(false);
        setShowSmallTip(false);
    }, [setShowBigTip]);

    const onTap = useTap(handleTap);

    return <>
        <Wrapper ref={ref} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...onTap}>
            {children}
        </Wrapper>
        {showSmallTip ? <End container={SCROLL_ROOT}><StyledTooltip style={{ top: pos.bottom, left: (pos.left + pos.right) / 2 }}>{message}</StyledTooltip></End> : null}
        {showBigTap ? <End><FullscreenTip onClick={closeFullscreen}><FullscreenText>{message}</FullscreenText></FullscreenTip></End>:null}
    </>
}

我遇到的问题是，当你点击图标时，它会立即打开和关闭全屏工具提示。i、 例如，它打印

TAP!
CLOSE!!!

用一个水龙头

现在我知道

touchend

在

单击之前会触发，但我不明白为什么这会很重要？？如果您查看我对
{…onTap}
和
onClick={closeFullscreen}
处理程序的位置，它们是兄弟。事件不应该以这种方式冒泡（无论是在本机DOM中还是在本地DOM中），我当然没有点击
，那么
全屏
到底是如何触发的呢

是一个门户。

尝试调用
onTouchEnd
上的
ev.preventDefault（）

根据
touchend
事件是“可取消的”，这意味着您可以使用
.preventDefault（）
来防止鼠标事件

如果在此事件上调用preventDefault方法，则应防止由与同一活动触摸点关联的任何触摸事件（包括鼠标事件或滚动）引起的任何默认操作

这确实有效，但我仍然不确定为什么
.shadow
会收到一个点击事件。我很惊讶，覆盖层甚至会在touchend和click之间渲染，但我认为如果有事件触发它，它会渲染。即便如此，您是否不需要该元素上的mousedown/touchstart事件来触发
单击
？
。shadow
正在接收一个单击事件，因为有足够的时间渲染它并在之后处理单击事件
click
事件是关于一个“点”（移动设备的手指），而
mousedown
事件只针对鼠标。我认为这样的决定是出于兼容性的原因。这就是为什么不需要处理
mousedown/touchtstart
，
click
就足够了。我确实需要一个touchtart事件，但如果我想打消长时间按下、拖动和鼠标事件的折扣，不是吗？我试图找到一个关于此行为的词，但找不到任何有用的词，只有一些人提到这件事。
TAP!
CLOSE!!!