React移动端问题：如何避免点击刚消失元素下方内容？

我开发了一个类似Mac/Windows顶部菜单栏的React组件，桌面端运行正常，但在触屏设备上存在严重问题：用户点击菜单选项（Over按钮）后，下方的Under按钮的点击事件会被意外触发。

复现步骤（移动端/Chrome DevTools模拟触屏） #

• 点击「Show Over」按钮显示Over菜单
• 点击绿色的Over按钮，控制台会打印「Clicked under :(」，说明下方Under按钮被触发
• 重复点击「Show Over」可多次测试

问题原因 #

移动端的点击事件存在事件序列延迟（触发顺序为pointerdown → pointerup → click），当在pointerUp事件中隐藏Over按钮后，后续的click事件会落在已经暴露的Under按钮上。由于两个按钮不在同一DOM层级，event.stopPropagation()无法阻止事件传递到下方元素。

原组件代码 #

import { useState, useEffect } from "react";

const App = () => {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(
        () => {
            const callback = () => setIsVisible(false);

            window.addEventListener("pointerdown", callback);

            return () => window.removeEventListener("pointerdown", callback);
        },
        []
    );

    return (
        <div>
            <button
                type="button"
                onClick={() => {
                    setIsVisible(true);
                }}
                onPointerDown={event => event.stopPropagation()}
            >
                Show Over
            </button>
            <div>
                <button
                    type="button"
                    onClick={() => console.log("Clicked under :(")}
                >
                    Under
                </button>
                {isVisible && (
                    <div>
                        <button
                            type="button"
                            onPointerDown={event => event.stopPropagation()}
                            onPointerUp={() => {
                                setIsVisible(false);
                            }}
                        >
                            Over
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default App;

已尝试的不完美方案 #

通过在pointerUp时添加全局click事件捕获，200ms后移除，能阻止误触发但依赖定时器，不够优雅：

onPointerUp={() => {
    setIsVisible(false);

    const lockClick = event => event.stopPropagation();

    window.addEventListener("click", lockClick, true);

    window.setTimeout(
        () => window.removeEventListener("click", lockClick, true),
        200
    );
}}

另一种延迟隐藏Over按钮的方案会导致视觉延迟，体验不佳。

更优解决方案（无需setTimeout） #

方案1：用Pointer Events替代click处理所有交互逻辑 #

既然问题出在click事件的延迟，直接使用pointerup处理所有按钮的交互逻辑，跳过click事件的触发链：

import { useState, useEffect } from "react";

const App = () => {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(
        () => {
            const callback = () => setIsVisible(false);

            window.addEventListener("pointerdown", callback);

            return () => window.removeEventListener("pointerdown", callback);
        },
        []
    );

    return (
        <div>
            <button
                type="button"
                onPointerUp={() => {
                    setIsVisible(true);
                }}
                onPointerDown={event => event.stopPropagation()}
            >
                Show Over
            </button>
            <div>
                <button
                    type="button"
                    onPointerUp={() => console.log("Clicked under :)")}
                >
                    Under
                </button>
                {isVisible && (
                    <div>
                        <button
                            type="button"
                            onPointerDown={event => event.stopPropagation()}
                            onPointerUp={() => {
                                setIsVisible(false);
                            }}
                        >
                            Over
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
};

export default App;

原理：Pointer Events是现代触屏设备的标准事件，直接用它处理交互可从根源避免click事件延迟导致的元素错位问题，兼容性覆盖所有现代移动端浏览器。

方案2：在Over按钮的pointerup中阻止后续click事件 #

通过event.preventDefault()阻止pointerup的默认行为，直接取消后续click事件的触发：

// 修改Over按钮的onPointerUp事件处理
onPointerUp={(event) => {
    event.preventDefault(); // 取消后续click事件触发
    setIsVisible(false);
}}

说明：仅需修改Over按钮的事件逻辑，代码改动最小，同时不影响其他按钮的正常交互。

方案3：用CSS控制菜单容器的事件响应 #

通过pointer-events属性，让隐藏后的菜单容器不接收任何事件：

// 修改菜单容器的渲染逻辑
{isVisible ? (
    <div style={{ pointerEvents: 'auto' }}>
        <button
            type="button"
            onPointerDown={event => event.stopPropagation()}
            onPointerUp={() => {
                setIsVisible(false);
            }}
        >
            Over
        </button>
    </div>
) : (
    <div style={{ pointerEvents: 'none' }} />
)}

原理：隐藏后的容器设置pointer-events: none，即使延迟的click事件触发，也不会传递到下方的Under按钮。

内容的提问来源于stack exchange，提问作者Robo Robok