Click-Away Listener

Click-Away Listener 元件會在點擊事件發生在其子元素外部時偵測到。

簡介

Click-Away Listener 是一個工具元件，用於監聽其子元素外部的點擊事件。（請注意，它僅接受一個子元素。）這對於像 Popper 這樣的元件非常有用，當使用者點擊文件中其他任何位置時，Popper 應該關閉。Click-Away Listener 也支援 Portal 元件。

下面的示範展示了當使用者點擊頁面上的任何其他位置時，如何隱藏選單下拉選單

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

<ClickAwayListener onClickAway={handleClickAway}>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

按下 Enter 鍵開始編輯

基礎知識

匯入

import ClickAwayListener from '@mui/material/ClickAwayListener';

自訂

與 Portal 一起使用

以下示範使用 Portal 元件將下拉選單渲染到目前 DOM 階層之外的新子樹中

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <Box sx={styles}>
          Click me, I will stay visible until you click outside.
        </Box>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <Box sx={styles}>
          Click me, I will stay visible until you click outside.
        </Box>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

按下 Enter 鍵開始編輯

監聽前導事件

預設情況下，Click-Away Listener 元件會回應後續事件——點擊或觸碰的結束。

您可以使用 mouseEvent 和 touchEvent 屬性將元件設定為監聽前導事件（點擊或觸碰的開始），如下面的示範所示

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <Box sx={{ position: 'relative' }}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Box sx={styles}>
        Click me, I will stay visible until you click outside.
      </Box>
    ) : null}
  </Box>
</ClickAwayListener>

按下 Enter 鍵開始編輯

無障礙功能

預設情況下，Click-Away Listener 會將 onClick 處理器新增至其子元素。這可能會導致螢幕閱讀器宣告該子元素是可點擊的，即使此 onClick 處理器本身對子元素沒有任何作用。

為了防止這種行為，請將 role="presentation" 新增至子元素

<ClickAwayListener>
  <div role="presentation">
    <h1>non-interactive heading</h1>
  </div>
</ClickAwayListener>

這也是修復在使用 Firefox 時 NVDA 中的已知問題所必需的，該問題會阻止警示訊息的宣告——詳情請參閱此 GitHub issue。

API

請參閱以下文件，以取得此處提及之元件的所有可用屬性和類別的完整參考。

<ClickAwayListener />