为什么 document.addEventListener('click', handleClick, true) 不起作用

Question

我有一个反应钩子，可以检测元素外部的点击：

export const useClickOutside = (
    ref: React.MutableRefObject<HTMLDivElement | null>,
    callback: Function,
) => {
    const handleClick = (e: MouseEvent) => {
        if (ref.current && !ref.current.contains(e.target as Node) {
            callback();
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClick, true);

        return () => {
            document.removeEventListener('click', handleClick, true);
        };
    }, [ref, callback]);
};

我用它来关闭下拉元素。我认为在任何情况下，只要单击文档中的任何位置，都会触发此事件。

但是在我的应用程序中，有一些基于 mxGraph 的方案。它们是在 svg 内部构建的。并且当单击某些对象的标签时，文档单击处理程序不起作用。

此处理程序会因什么原因失败？

Answer 1

问题是您在函数内部添加了 useEffect 将其单独放在函数外部，这里是更新的代码。

useEffect(() => {
        document.addEventListener('click', handleClick, true);

        return () => {
            document.removeEventListener('click', handleClick, true);
        };
    }, [ref, callback]);



export const useClickOutside = (
    ref: React.MutableRefObject<HTMLDivElement | null>,
    callback: Function,
) => {
    const handleClick = (e: MouseEvent) => {
        if (ref.current && !ref.current.contains(e.target as Node) {
            callback();
        }
    };
};