[筆記] HTML Vue3 Click Outside 實作與誤區 @地瓜大的飛翔旅程

章節連結

內容

1. 自行撰寫
2. 使用 VueUse 的 onClickOutside
誤區

參考資料

實務上要實作 Click Outside，多半都是將監聽器綁在 window 上，或是透過 Event 事件的 ComposePath() 方法來進行過濾，進而了解究竟有沒有點選該元素。

內容

1. 自行撰寫

用 ref 取得 DOM，然後撰寫 func 給 window 上的 ‘click’ 綁定。

邏輯

A. 點擊的 e.target 和你的目標元素比對
B. 若目標元素沒有包含 e.target，那就執行你所指定的函式

import { onMounted, onBeforeUnmount, Ref } from 'vue'

const handleClickOutSide = (elRef: Ref<HTMLElement | null>, onClickOutside: () => void) => {
  if (!elRef) return

  const handler = (e: MouseEvent) => {
    const el = elRef.value
    if (!el) return
    if (!el.contains(e.target as Node)) {
      if (typeof onClickOutside === 'function') {
        onClickOutside()
      }
    }
  }

  onMounted(() => {
    window.addEventListener('click', handler)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', handler)
  })
}

export default handleClickOutSide