js判断是否是子元素
原创
文本俺将跟大家介绍，如何判断一个当前点击的元素，是否是指定元素的子元素。
js判断是否是子元素
解决思路：
俺给父元素指定了一个id，并使用这个循环检查当前元素是否属于它的子元素。
实现代码：
方法一：
function isParent (obj,parentObj){
while (obj != ?developer/article/1934824/undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
if (obj == parentObj){
return true;
}
obj = obj.parentNode;
}
return false;
}方法二：jquery代码
//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};
//使用起来也非常方便：
$(document).click(function(event){
alert($(event.target).isChildOf(“.floatLayer”));
});
//或者
$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (“.floatLayer”));
});方法三：
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循环结束。
该解决思路，是常见的解决办法，大家可以拿小本本记好了~类似于不停向上找。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读