Click-Away Listener (点击外部监听器)

Click-Away Listener 组件用于检测点击事件是否发生在子元素外部。

简介

Click-Away Listener 是一个实用组件，用于监听其子元素外部的点击事件。（请注意，它只接受*一个*子元素。）这对于像 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 问题。

API

有关此处提及的组件的所有可用属性和类的完整参考，请参阅下面的文档。

<ClickAwayListener />