我有需要在 click 事件中檢查一個元素是否是特定父元素的子元素。
我給這個父元素分配了一個 id
,然後我使用以下迴圈檢查被點擊的元素是否屬於其子元素:
const isDescendant = (el, parentId) => {
let isChild = false
if (el.id === parentId) { // 是否為元素本身?
isChild = true
}
while (el = el.parentNode) {
if (el.id == parentId) {
isChild = true
}
}
return isChild
}
document.addEventListener('click', event => {
const parentId = 'mycontainer'
if (isDescendant(event.target, parentId)) {
// 是子元素,在這裡處理這種情況
} else {
// 不是子元素,在這裡處理這種情況
}
})
在 while 迴圈中,我們使用賦值運算符 =
進行迭代,直到沒有父節點為止,此時 el.parentNode
返回 null
,while 迴圈結束。
這是一種向上遍歷元素樹的方式,直到完成為止。