Back to Hooks

useClickAway

packages/hooks/src/useClickAway/index.zh-CN.md

3.9.71.3 KB
Original Source

useClickAway

监听目标元素外的点击事件。

代码演示

基础用法

<code src="./demo/demo1.tsx" />

自定义 DOM

<code src="./demo/demo2.tsx" />

支持多个 DOM 对象

<code src="./demo/demo3.tsx" />

监听其它事件

<code src="./demo/demo4.tsx" />

支持多个事件

<code src="./demo/demo5.tsx" />

支持 shadow DOM

<code src="./demo/demo6.tsx" />

API

typescript
type Target = Element | (() => Element) | React.MutableRefObject<Element>;
type DocumentEventKey = keyof DocumentEventMap;

useClickAway<T extends Event = Event>(
  onClickAway: (event: T) => void,
  target: Target | Target[],
  eventName?: DocumentEventKey | DocumentEventKey[]
);

Params

参数说明类型默认值
onClickAway触发函数(event: T) => void-
targetDOM 节点或者 Ref 或者函数,支持数组Target | Target[]-
eventName指定需要监听的事件,支持数组DocumentEventKey | DocumentEventKey[]click