Click-Away Listener

Click-Away Listener 元件會偵測點擊事件是否發生在其子元素之外。

簡介

Click-Away Listener 是一個工具元件，用於監聽其子元素外部的點擊事件。（請注意，它僅接受一個子元素。）

這對於諸如 Popper 之類的元件非常有用，這些元件應在使用者點擊文件中任何其他位置時關閉。

Click-Away Listener 也支援 Portal 元件。

元件

import { ClickAwayListener } from '@mui/base/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>

<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 以開始編輯

與 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 時，會阻止宣告警示訊息的已知問題所必需的—詳細資訊請參閱 mui/material-ui#29080。