Click away listener 它处点击监听器

用于检测点击事件是否发生在元素之外。它可以监听文档中某处发生的点击事件。

📦 1.5kB 已压缩的包。
⚛️ 支持传送门组件

示例

例如，当用户在点击页面除菜单外的任何一处，您可能想隐藏一个下拉的菜单：

<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>

请注意，该组件仅接受一个子元素。你可以在 Menu 的文档章节阅读更高级的样例。

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>

前端（Leading edge）

默认情况下，组件响应了尾随事件（trailing events）（点击 + 触摸结束）。然而，您可以配置它来回应一些主要的事件（leading events）（鼠标按下 + 触摸开始）。

<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>

⚠️ 在此模式下，仅有文档对象滚动条上的交互被忽略。

API

<ClickAwayListener />