VueUseonClickOutside
Listen for clicks outside of an element. Useful for modal or dropdown.
Demo
Usage
html
<template>
<div ref="target">
Hello world
</div>
<div>
Outside element
</div>
</template>
<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
onClickOutside(target, (event) => console.log(event))
return { target }
}
}
</script>
<template>
<div ref="target">
Hello world
</div>
<div>
Outside element
</div>
</template>
<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
onClickOutside(target, (event) => console.log(event))
return { target }
}
}
</script>
This function uses Event.composedPath() which is NOT supported by IE 11, Edge 18 and below. If you are targeting these browsers, we recommend you to include this code snippet on your project.
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<OnClickOutside @trigger="count++" :options="{ ignore: [/* ... */] }">
<div>
Click Outside of Me
</div>
</OnClickOutside>
<OnClickOutside @trigger="count++" :options="{ ignore: [/* ... */] }">
<div>
Click Outside of Me
</div>
</OnClickOutside>
Directive Usage
This function also provides a directive version via the
@vueuse/componentspackage. Learn more about the usage.
html
<script setup lang="ts">
import { ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'
const modal = ref(false)
function closeModal() {
modal.value = false
}
</script>
<template>
<button @click="modal = true">
Open Modal
</button>
<div v-if="modal" v-on-click-outside="closeModal">
Hello World
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'
const modal = ref(false)
function closeModal() {
modal.value = false
}
</script>
<template>
<button @click="modal = true">
Open Modal
</button>
<div v-if="modal" v-on-click-outside="closeModal">
Hello World
</div>
</template>
Type Declarations
Show Type Declarations
typescript
export interface OnClickOutsideOptions extends ConfigurableWindow {
/**
* List of elements that should not trigger the event.
*/
ignore?: (MaybeElementRef | string)[]
/**
* Use capturing phase for internal event listener.
* @default true
*/
capture?: boolean
/**
* Run handler function if focus moves to an iframe.
* @default false
*/
detectIframe?: boolean
}
export declare type OnClickOutsideHandler<
T extends {
detectIframe: OnClickOutsideOptions["detectIframe"]
} = {
detectIframe: false
}
> = (
evt: T["detectIframe"] extends true ? PointerEvent | FocusEvent : PointerEvent
) => void
/**
* Listen for clicks outside of an element.
*
* @see https://vueuse.org/onClickOutside
* @param target
* @param handler
* @param options
*/
export declare function onClickOutside<T extends OnClickOutsideOptions>(
target: MaybeElementRef,
handler: OnClickOutsideHandler<{
detectIframe: T["detectIframe"]
}>,
options?: T
): (() => void) | undefined
export interface OnClickOutsideOptions extends ConfigurableWindow {
/**
* List of elements that should not trigger the event.
*/
ignore?: (MaybeElementRef | string)[]
/**
* Use capturing phase for internal event listener.
* @default true
*/
capture?: boolean
/**
* Run handler function if focus moves to an iframe.
* @default false
*/
detectIframe?: boolean
}
export declare type OnClickOutsideHandler<
T extends {
detectIframe: OnClickOutsideOptions["detectIframe"]
} = {
detectIframe: false
}
> = (
evt: T["detectIframe"] extends true ? PointerEvent | FocusEvent : PointerEvent
) => void
/**
* Listen for clicks outside of an element.
*
* @see https://vueuse.org/onClickOutside
* @param target
* @param handler
* @param options
*/
export declare function onClickOutside<T extends OnClickOutsideOptions>(
target: MaybeElementRef,
handler: OnClickOutsideHandler<{
detectIframe: T["detectIframe"]
}>,
options?: T
): (() => void) | undefined
Source
Contributors
Anthony Fu
sibbng
wheat
Fiad
Young
Gavin
webfansplz
Jelf
JserWang
Alex Kozack