[筆記] DOM contains 方法與 onClickOutside 的搭配使用 @地瓜大的飛翔旅程

章節連結

內容
參考資料

近期搭配 VueUse 的 onClickOutside 實作 Dialog 的時候，由於其內有其他的 absolute 元件，因此會判定為 clickOutside 而觸發關閉 Dialog。這邊僅需要使用原生 DOM 就有的 .contains() 方法就可以將其排除。

內容

若你點擊的內容是父層內的某一個元素 ( 可以是子層、孫層…… 等巢狀內層 )，那你可以透過在觸發 onClickOutside 函式的時候，去選定某一個父層的 DOM，然後看你的 event.target 有沒有包含在內。如果有包含在內，就直接 return 跳出就好

const datePickerElement = document.querySelector('.air-datepicker');

if (datePickerElement && datePickerElement.contains(event.target as Node)) {
  // 點擊是在日期選擇器內部，忽略這次點擊
  return;
}

const datePickerElement = document.querySelector('.air-datepicker');

if (datePickerElement && datePickerElement.contains(event.target as Node)) {

// 點擊是在日期選擇器內部，忽略這次點擊

return;

}

參考資料

1. HTML DOM Element contains()

按讚加入粉絲團

內容

參考資料

延伸閱讀