Skip to content

onClickOutside

Category
Export Size
1.34 kB
Last Changed
6 days ago

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

Demo

Usage


















 





























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

<OnClickOutside @trigger="count++">
  <div>
    Click Outside of Me
  </div>
</OnClickOutside>
<OnClickOutside @trigger="count++">
  <div>
    Click Outside of Me
  </div>
</OnClickOutside>

Directive Usage

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

<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

export interface OnClickOutsideOptions extends ConfigurableWindow {
  /**
   * List of elements that should not trigger the event.
   */
  ignore?: MaybeElementRef[]
  /**
   * 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[]
  /**
   * 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

SourceDemoDocs

Contributors

Anthony Fu
sibbng
wheat
Young
Gavin
webfansplz
Jelf
JserWang
Alex Kozack

Changelog

Pending for release...
5a976 - feat: add bubble modifier to directive (#2183)
a3742 - fix: put ignore logic on pointerdown event (#2198)
v9.0.0-beta.1 on 7/20/2022
6b1ff - fix: fix handler type (#1961)
v8.9.2 on 7/12/2022
70160 - feat: add detectIframe option (#1795)
v8.7.0 on 6/16/2022
1988e - fix: avoid calling safari workaround on right click (#1673)
v8.4.0 on 5/3/2022
89c9e - fix: fallback to pointerup event if click event not propagate (#1522)
v8.1.0 on 3/16/2022
c31b0 - feat: customizable phase (#1406)
v8.0.0-beta.3 on 3/8/2022
66cef - fix: should work normal w/ directive (#1366)
v7.6.0 on 2/8/2022
c275a - feat: add ignore option (#1205)
v7.0.0 on 11/20/2021
2ff6c - refactor!: listen click event, remove event option (#817)
v6.4.0 on 9/17/2021
e557f - feat: added 'as' prop to renderable components (#742)

Released under the MIT License.