React自定义useClickOutside Hook为何禁用父组件链接点击？

问题描述 #

我编写了一个自定义React Hook，当用户点击元素外部时会触发指定函数。该Hook功能正常，但点击父组件中的<Link>链接时无响应，而点击同一组件内的链接则正常。请问有解决方案吗？

代码示例 #

useClickOutside Hook #

type Event = MouseEvent | TouchEvent

const useClickOutside = <T extends HTMLElement = HTMLElement>(
    ref: RefObject<T>,
    handler: (event: Event) => void
) => {
    useEffect(() => {
        const listener = (e: Event) => {
            const el = ref?.current
            if (!el || el.contains((e?.target as Node) || null)) {
                return
            }

            handler(e)
        }

        document.addEventListener("mousedown", listener)
        document.addEventListener("touchstart", listener)

        return () => {
            document.removeEventListener("mousedown", listener)
            document.removeEventListener("touchstart", listener)
        }
    }, [ref, handler])
}

父组件 #

const ParentComponent = ({ children }) => {
    return (
        <div>
            <nav>
                <Link to="/">Home</Link>
            </nav>

            {children}
        </div>
    )
}

子组件 #

const ChildComponent = () => {
    const ref = useRef(null);
    useClickOutside(ref, onClickOutside)

    return (
        <ParentComponent>
            ...rest of the page
            <button ref={ref}>
                Click me
            </button>
        </ParentComponent>
    )
}

解决方案 #

问题根源 #

你的Hook监听的是mousedown和touchstart事件，若onClickOutside函数中调用了e.preventDefault()，会阻止浏览器触发后续的click事件。而React Router的<Link>依赖click事件完成路由跳转，因此点击父组件的<Link>时，mousedown触发后阻断了click，导致路由无响应；同一组件内的链接因处于ref元素内部，listener直接返回，不会执行handler，所以click事件正常触发。

可行解决方法 #

1. 切换为click事件监听

将Hook的监听事件从mousedown/touchstart改为click/touchend，确保<Link>的跳转逻辑优先执行：

type Event = MouseEvent | TouchEvent

const useClickOutside = <T extends HTMLElement = HTMLElement>(
    ref: RefObject<T>,
    handler: (event: Event) => void
) => {
    useEffect(() => {
        const listener = (e: Event) => {
            const el = ref?.current
            if (!el || el.contains((e?.target as Node) || null)) {
                return
            }

            handler(e)
        }

        document.addEventListener("click", listener)
        document.addEventListener("touchend", listener)

        return () => {
            document.removeEventListener("click", listener)
            document.removeEventListener("touchend", listener)
        }
    }, [ref, handler])
}

2. 移除不必要的默认行为阻止

检查onClickOutside函数，若存在e.preventDefault()且无必要，直接移除：

const onClickOutside = (e: Event) => {
    // 移除 e.preventDefault()
    // 你的业务逻辑
}

3. 跳过可导航元素的handler执行

在listener中判断目标元素是否为链接（如<a>标签，<Link>渲染后会生成<a>），若是则跳过handler：

const listener = (e: Event) => {
    const el = ref?.current
    const target = e.target as HTMLElement
    
    // 检测是否为链接或包含链接的元素
    if (target.tagName === 'A' || target.closest('a')) {
        return
    }

    if (!el || el.contains(target || null)) {
        return
    }

    handler(e)
}

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