> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/useclickoutside.md).

# useClickOutside

#### 基础用法

```html
<template>
    <div ref="target" style="width: 100px; height: 100px; border: 1px #ccc solid">Hello world</div>

    <div>点击外面</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useClickOutside } from "hooks-vue3";

const target = ref(null);
useClickOutside((event) => console.log(event), [target]);
</script>
```

### API

```typescript
useClickOutside(() => void, target, eventName);
```

### 参数

```typescript
type Target<T> = T | (() => T) | Ref<T>;

function useClickOutside<T extends keyof DocumentEventMap>(
  onClickAway: (event: DocumentEventMap[T]) => void,
  target: Target<Element | null> | Target<Element | null>[],
  eventName: T | T[] = 'mousedown' as T,
)
```