Событие клика вне компонента

Отлавливает щелчок за пределами компонента Слушает только щелчки внутри браузерного документа

📦 1 кБ в сжатом виде.
⚛️ Поддерживает порталы

Пример

Например, если вам нужно скрыть выпадающее меню щелчком по странице за его пределами:

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

Обратите внимание, что компонент принимает только один дочерний элемент. Более подробный пример вы можете найти в разделе документации меню.

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>

Ведущие события

По умолчанию компонент отвечает на конечные события (клик (click) + окончание касания (touchend)). Однако, вы можете настроить его таким образом, чтобы он отвечал и на ведущие событие (нажатие кнопки мыши (mousedown) + начало касания (touch start)).

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