<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>请注意，该组件仅接受一个子元素。 You can find a more advanced demo on the Menu documentation section.
Portal（传送门）
The following demo uses Portal to render the dropdown into a new "subtree" outside of current DOM hierarchy.
<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>无障碍设计
By default <ClickAwayListener /> will add an onClick handler to its children. This can result in e.g. screen readers announcing the children as clickable. However, the purpose of the onClick handler is not to make children interactive.
In order to prevent screen readers from marking non-interactive children as "clickable" add role="presentation" to the immediate children:
<ClickAwayListener>
<div role="presentation">
<h1>non-interactive heading</h1>
</div>
</ClickAwayListener>
This is also required to fix a quirk in NVDA when using Firefox that prevents announcement of alert messages (see mui/material-ui#29080).
素颜模式
As the component does not have any styles, it also comes with the Base package.
import ClickAwayListener from '@mui/base/ClickAwayListener';