useClickOutside

監聽元素外部的點擊。 對於模式或下拉選單很有用。

useClickOutside 偵測目標元素外部的點擊事件，是 useClickAway 的別名。當使用者在指定元素之外點擊時觸發回呼。兩個 hooks 具有完全相同的 API 和行為。

使用場景

  • 點擊下拉選單或模態框外部時關閉它們
  • 當你的程式碼庫偏好 useClickOutside 命名慣例時使用
  • 任何適用 useClickAway 的場景——兩個 hooks 可互換使用

注意事項

  • SSR 安全：在伺服器端渲染時為空操作。伺服器上不會附加事件監聯器。
  • 別名：此 hook 是 useClickAway 的直接別名，具有相同的功能和 API。
  • 相關 hooks：另請參閱 useClickAway 獲取完整文件。

Usage

Live Editor

function Demo() {
  const [visible, setVisible] = useState(false);

  const modalRef = useRef<HTMLDivElement>(null);

  useClickOutside(modalRef, () => {
    setVisible(false);
  });

  return (
    <div>
      <button onClick={() => setVisible(true)}> 打開模態框</button>
      {visible && (
        <div
          ref={modalRef}
          style={{
            position: "fixed",
            left: "50%",
            top: "50%",
            transform: "translate(-50%,-50%)",
            width: 420,
            maxWidth: "100%",
            zIndex: 10,
            border: "1px solid var(--c-input-border)",
            background: "var(--c-bg)",
          }}
        >
          <div
            style={{
              padding: "0.4em 2em",
              boxShadow: "2px 2px 10px var(--c-box-shadow)",
            }}
          >
            <p
              style={{
                fontWeight: 700,
                fontSize: "1.4rem",
                marginBottom: "2rem",
              }}
            >
              演示模態框
            </p>
            <p>點擊模態框外部關閉它。</p>
          </div>
        </div>
      )}
    </div>
  );
}
Result

API

useClickOutside

Returns

void

Arguments

參數名描述類型預設值
targetdom对象BasicTarget<Element> (必填)-
handler监听函数(evt: EventType) => void (必填)-
enabled监听函数是否生效boolean | undefined-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;

EventType

export type EventType = MouseEvent | TouchEvent;