Skip to content
On this page

clickOutside

是否点击了元素外部
主要是利用了 e.composedPath().includes(el) 判断点击位置

效果

源码

ts
export type UseClickOutsideTarget = Element | Ref<Element | undefined | null> | (() => Element)

function useOutSideClick(target: UseClickOutsideTarget, listener: EventListener) {
  const el = typeof target === 'function' ? target() : unref(target);

  const handler = (e: MouseEvent) => {

    if (el && !el.contains(e.target as Node)) {
      listener(e)
    }
  }
  document.addEventListener("click", handler)
}

onMounted(() => {
  useOutSideClick(a, (e) => {
    console.log(e)
  })
})