Skip to content

onClickOutside

Category
Export Size
893 B
Last Changed
last week

Listen for clicks outside of an element. Useful for modal or dropdown.

Demo

Usage

vue
<script setup>
import { onClickOutside } from '@vueuse/core'
import { ref } from 'vue'

const target = ref(null)

onClickOutside(target, event => console.log(event))
</script>

<template>
  <div ref="target">
    Hello world
  </div>
  <div>Outside element</div>
</template>

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/components package. Learn more about the usage.

vue
<template>
  <OnClickOutside :options="{ ignore: [/* ... */] }" @trigger="count++">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue
<script setup lang="ts">
import { vOnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

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>

You can also set the handler as an array to set the configuration items of the instruction.

vue
<script setup>
import { vOnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const modal = ref(false)

const ignoreElRef = ref()

const onClickOutsideHandler = [
  (ev) => {
    console.log(ev)
    modal.value = false
  },
  { ignore: [ignoreElRef] },
]
</script>

<template>
  <button @click="modal = true">
    Open Modal
  </button>

  <div ref="ignoreElRef">
    click outside ignore element
  </div>

  <div v-if="modal" v-on-click-outside="onClickOutsideHandler">
    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?: MaybeRefOrGetter<(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 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

Source

SourceDemoDocs

Contributors

Anthony Fu
sibbng
Anthony Fu
wheat
IlyaL
Onion-L
Matej Černý
不见月
Doctorwu
Rory King
糠帅傅
Chestnut
vaakian X
Fiad
Young
Gavin
webfansplz
Jelf
JserWang
Alex Kozack

Changelog

v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.3.0 on 11/21/2024
fe322 - feat(OnClickOutside): support component with fragments (#4313)
v11.1.0 on 9/16/2024
9e598 - fix: improve cross-browser compatibility (#4185)
aa5e3 - fix: make ignore accept reactive values (#4211)
v10.6.0 on 11/9/2023
69851 - fix: adjust shouldListen handling timing (#3503)
v10.3.0 on 7/30/2023
9091e - fix: fix outside click on html element in ios (#3252)
v10.2.0 on 6/16/2023
2c66e - fix: ensure focus on iframe captured in firefox (#3066)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.8.0 on 12/20/2022
7b3db - feat: allow selector strings for ignore list (#2439)
12e21 - fix: apply ignore list on keyboard clicks (#2438)
v9.6.0 on 11/22/2022
ff96d - fix: call handler if click event is fired by a keypress (#2426)
v9.5.0 on 11/9/2022
f78c4 - fix: access correct document (#2404)
c913b - feat: support options in component (#2391)
v9.3.0 on 9/26/2022
5a976 - feat: add bubble modifier to directive (#2183)
a3742 - fix: put ignore logic on pointerdown event (#2198)

Released under the MIT License.