文本俺将跟大家介绍,如何判断一个当前点击的元素,是否是指定元素的子元素。
解决思路:
俺给父元素指定了一个id,并使用这个循环检查当前元素是否属于它的子元素。
实现代码:
方法一:
function isParent (obj,parentObj){
while (obj != 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 删除。