---
title: "useClickAway – Element Hook 使用方法與示例 (useClickOutside 的別名)"
description: "監聽元素外部的點擊事件。useClickOutside 的別名。適用於模態框或下拉選單。學習使用模式、最佳實踐和 React 開發者的代碼示例。"
canonical: https://reactuse.com/zh-Hant/element/useclickaway/
---

# useClickAway

監聽元素外部的點擊事件。適用於模態框或下拉選單。

`useClickAway` 偵測目標元素外部的點擊事件。當使用者在指定元素之外點擊時，觸發提供的回呼函式。支援設定監聽的事件類型（如 `mousedown`、`touchstart`），並可同時指定多個目標元素。

### 使用場景

- 點擊下拉選單或彈出框外部時關閉它們
- 取消編輯模式（例如內聯編輯時點擊外部取消）
- 關閉行動端的側邊欄或漢堡選單

### 注意事項

- **SSR 安全**：在伺服器端渲染時為空操作。伺服器上不會附加事件監聽器。
- **事件類型**：預設監聽 `mousedown` 事件。可透過選項自訂為 `click`、`touchstart` 或其他事件類型。
- **相關 hooks**：另請參閱 `useClickOutside`，這是 `useClickAway` 的功能等價別名。

:::info
`useClickAway` 是 [`useClickOutside`](/zh-Hant/element/useClickOutside) 的別名。它们具有相同的功能和 API。
:::

## 用法

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

  const modalRef = useRef<HTMLDivElement>(null);

  useClickAway(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>
  );
};

```

%%API%%