文本俺将跟大家介绍,如何判断一个当前点击的元素,是否是指定元素的子元素。
解决思路:
俺给父元素指定了一个id,并使用这个循环检查当前元素是否属于它的子元素。
实现代码:
/**
* 前端教程网
* https://www.pipipi.net/
*/
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循环结束。
该解决思路,是常见的解决办法,大家可以拿小本本记好了~类似于不停向上找。