⬅️ Back to Table of Contents

📄 onClickOutside

📊 Analysis Summary

Metric	Count
🔧 Functions	8
📦 Imports	13
📊 Variables & Constants	1
📐 Interfaces	1
📑 Type Aliases	2

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/onClickOutside/index.ts

📦 Imports

Name	Source
Fn	@vueuse/shared
ComponentPublicInstance	vue
MaybeRefOrGetter	vue
VNode	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
MaybeElementRef	../unrefElement
isIOS	@vueuse/shared
noop	@vueuse/shared
toValue	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useEventListener	../useEventListener

---

Variables & Constants

Name	Type	Kind	Value	Exported
_iOSWorkaround	boolean	let/var	false	✗

---

Functions

onClickOutside(target: MaybeComputedElementRef, handler: OnClickOutsideHandler<T>, options: T): Fn

Listen for clicks outside of an element.

Parameters:

• target any: No description
• handler any: No description
• options any: No description

See: https://vueuse.org/onClickOutside

Raw JSDoc

/**
 * Listen for clicks outside of an element.
 *
 * @see https://vueuse.org/onClickOutside
 * @param target
 * @param handler
 * @param options
 */

Code

export function onClickOutside<
  T extends OnClickOutsideOptions,
>(
  target: MaybeComputedElementRef,
  handler: OnClickOutsideHandler<T>,
  options?: T,
): Fn

Internal helpers

Declared inside another function in this file.

shouldIgnore(event: Event): any

Parameters:

• event Event

Returns: any

Calls:

• toValue(ignore).some
• Array.from(window.document.querySelectorAll(target)) .some
• event.composedPath().includes
• unrefElement (from ../unrefElement)

Code

(event: Event) => {
    return toValue(ignore).some((target) => {
      if (typeof target === 'string') {
        return Array.from(window.document.querySelectorAll(target))
          .some(el => el === event.target || event.composedPath().includes(el))
      }
      else {
        const el = unrefElement(target)
        return el && (event.target === el || event.composedPath().includes(el))
      }
    })
  }

hasMultipleRoots(target: MaybeComputedElementRef): boolean

Determines if the given target has multiple root elements. Referenced from: https://github.com/vuejs/test-utils/blob/ccb460be55f9f6be05ab708500a41ec8adf6f4bc/src/vue-wrapper.ts#L21

Raw JSDoc

/**
   * Determines if the given target has multiple root elements.
   * Referenced from: https://github.com/vuejs/test-utils/blob/ccb460be55f9f6be05ab708500a41ec8adf6f4bc/src/vue-wrapper.ts#L21
   */

Calls:

• toValue (from vue)

Code

function hasMultipleRoots(target: MaybeComputedElementRef): boolean {
    const vm = toValue(target) as ComponentPublicInstance
    return vm && vm.$.subTree.shapeFlag === 16
  }

checkMultipleRoots(target: MaybeComputedElementRef, event: Event): boolean

Parameters:

• target MaybeComputedElementRef
• event Event

Returns: boolean

Calls:

• toValue (from vue)
• Array.isArray
• children.some
• event.composedPath().includes

Internal Comments:

// @ts-expect-error should be VNode

Code

function checkMultipleRoots(target: MaybeComputedElementRef, event: Event): boolean {
    const vm = toValue(target) as ComponentPublicInstance
    const children = vm.$.subTree && vm.$.subTree.children

    if (children == null || !Array.isArray(children))
      return false

    // @ts-expect-error should be VNode
    return children.some((child: VNode) => child.el === event.target || event.composedPath().includes(child.el))
  }

listener(event: Event): void

Parameters:

• event Event

Returns: void

Calls:

• unrefElement (from ../unrefElement)
• hasMultipleRoots
• checkMultipleRoots
• event.composedPath().includes
• shouldIgnore
• handler

Code

(event: Event) => {
    const el = unrefElement(target)

    if (event.target == null)
      return

    if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
      return

    if (!el || el === event.target || event.composedPath().includes(el))
      return

    if ('detail' in event && event.detail === 0)
      shouldListen = !shouldIgnore(event)

    if (!shouldListen) {
      shouldListen = true
      return
    }

    handler(event as any)
  }

stop(): void

Returns: void

Calls:

• cleanup.forEach

Code

() => cleanup.forEach(fn => fn())

cancel(): void

Returns: void

Code

() => {
        shouldListen = false
      }

trigger(event: Event): void

Parameters:

• event Event

Returns: void

Calls:

• listener

Code

(event: Event) => {
        shouldListen = true
        listener(event)
        shouldListen = false
      }

---

Interfaces

OnClickOutsideOptions<Controls extends boolean = false>

Interface Code

export interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
  /**
   * List of elements that should not trigger the event,
   * provided as Refs or CSS Selectors.
   */
  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
  /**
   * Use controls to cancel/trigger listener.
   * @default false
   */
  controls?: Controls
}

Properties

Name	Type	Optional	Description
ignore	MaybeRefOrGetter<(MaybeElementRef \| string)[]>	✓	not shown
capture	boolean	✓	not shown
detectIframe	boolean	✓	not shown
controls	Controls	✓	not shown

---

Type Aliases

OnClickOutsideHandler<T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions>

type OnClickOutsideHandler<T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions> = (
  event: (T['detectIframe'] extends true ? FocusEvent : never)
    | (T['controls'] extends true ? Event : never)
    | PointerEvent,
) => void;

OnClickOutsideReturn<Controls extends boolean = false>

type OnClickOutsideReturn<Controls extends boolean = false> = Controls extends false ? Fn : {
  stop: Fn
  cancel: Fn
  trigger: (event: Event) => void
};

---

Generated by Syntax Scribe