同Web应用多包共用React外部点击Hook，document事件监听失效

代码示例 #

function useOutsideAlerter(ref: any, callback: () => void) {
    useEffect(() => {
        function handleClickOutside(event: {target: any}) {
            if (!ref?.current?.contains(event.target)) {
                callback();
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [ref, callback]);
}

场景描述 #

上述useOutsideAlerter Hook用于监听元素外部点击，在层级为网站 => 第一个包 => 第二个包的Web应用结构中，仅第一个包的监听器能正常触发，第二个包的监听器从未执行。将第一个包中的document.addEventListener改为window.addEventListener后，两个包的监听器均能正常工作。

调试细节：第二个包的监听器从未被调用，第一个包的监听器仅在点击时触发一次。

根本原因分析 #

核心问题：同一元素上的事件监听器被阻止执行 #

当两个包的Hook都将监听器绑定到document时，事件触发顺序遵循监听器绑定的先后顺序——第一个包的监听器先绑定，会先执行。如果第一个包的callback回调函数（或handleClickOutside内部逻辑）调用了event.stopImmediatePropagation()，会直接阻止同一document元素上后续绑定的所有监听器执行，这就导致第二个包的监听器完全无法被触发。

为什么改为window能解决问题？ #

事件冒泡的顺序是：点击目标元素 → 逐层向上冒泡至document → 最终冒泡至window。当第一个包的监听器绑定到window后，两个监听器处于不同的DOM节点：

1. 事件先到达document，触发第二个包的监听器
2. 事件继续冒泡至window，触发第一个包的监听器

此时即使第一个包的回调中调用了event.stopImmediatePropagation()，也只会阻止window上后续绑定的监听器，不会影响已经在document上执行的第二个包的监听器，因此两个包的逻辑都能正常运行。

补充验证点 #

可以检查第一个包中useOutsideAlerter传入的callback函数，确认是否存在调用event.stopImmediatePropagation()或类似阻止同一元素后续监听器执行的逻辑——这是触发该问题的最直接原因。

内容的提问来源于stack exchange，提问作者Raed Khalaf