時常有dropdown(or modal)需求，在點擊空白要消失，但在dropdown範圍點擊(或移動)則保持顯示，這時不用用一堆if else去判斷滑鼠位置，只要用簡單的contains就可以判斷(以下用vue3示範)
// <template lang="pug">
div(
ref="dropdownlist",
:class="!showDropdown ? 'invisible' : ''"
)
span test
// <script lang="ts">
// 顯示開關
const showDropdown = ref(false)
// 指定範圍物件
const dropdownlist = ref<Node>()
onMounted(() => {
window.addEventListener(
"click",
(e: MouseEvent) => {
// 判斷點擊物件是否在指定物件內
if (showDropdown.value && !dropdownlist.value?.contains(e.target as Node)) {
showDropdown.value = ! showDropdown.value
}
},
true // 冒泡捕捉
)
})
小結：這樣就可以輕鬆達到目的，這是我目前看到最簡單的辦法，剩下就看你怎麼應用啦
