点击外部监听器

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>

这也是修复 NVDA 在使用 Firefox 时阻止公告警报消息的已知问题所必需的——有关详细信息，请参阅 mui/material-ui#29080。