挂钩中附加的事件侦听器内的反应状态更改会停止默认行为

Question

我创建了一个反应钩子来处理 div 外部的点击。为此，我在挂钩内附加了一个事件监听器，并在事件监听器回调中更新组件的状态。但此行为会停止此 div 内元素的默认行为。

export function useClickOutside({
  ref,
  onClickOutside,
}: {
  ref: React.RefObject<HTMLElement>;
  onClickOutside: () => void;
}) {
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      onClickOutside();
    }
    document.addEventListener("pointerdown", handleClickOutside);

    return () => {
      document.removeEventListener("pointerdown", handleClickOutside);
    };
  });
}

onClickOutside 只改变状态：

onClickOutside = () => setIsMenuOpen(false)

如果我不在handleClickOutside事件处理程序中调用onClickOutside()函数，则正常行为（我单击导航栏下拉菜单中的按钮，滚动到该部分（javascript平滑滚动）。但仅调用onClickOutside()更新状态并取消按钮单击的正常行为。

Answer 1

嗨，我发现这种行为的原因是由于pointerdown事件监听器造成的。 Pointerdown 事件捕获所有后续指针事件。因此，根据文档，需要调用element.releasePointerCapture来释放指针事件。

我发现用单击事件替换pointerdown事件可以解决我的问题。

document.addEventListener("click", handleClickOutside);