用js判断一个元素是否为另一个元素的子元素,再做一些效果的时候经常用到,特别是和鼠标事件相关的应用中,比如一个浮层,在鼠标操作浮层内元素的时候浮层显示,当点击浮层外的元素的时候隐藏浮层。当然方法有很多,不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。
废话少说直接上方法:
[code=”javascript”]
function isParent (obj,parentObj){
while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’){
if (obj == parentObj){
return true;
}
obj = obj.parentNode;
}
return false;
}
[/code]
查看demo:https://www.html.cn/demo/isParent/
感谢hafeyang的留言,js判断一个元素是否为另一个元素的子元素相关方法还有contains方法,大家可以看看司徒正美的文章http://www.cnblogs.com/rubylouvre/archive/2011/05/30/1583523.html
直接用contains 方法更加简单 http://blog.csdn.net/encienqi/archive/2011/02/20/6196571.aspx
谢谢 😛
码头兄,你这个方法也挺简单的。原生的contains要去兼容
@情封, 我也这么认为!
码头兄,你这个方法也挺简单的。原生的contains要去做兼容性
这个方法巧,以前都没想到过。。总是先入为主的认为就contains方法。jquery和百度的tangram都是用的contains貌似
这个有点不明白,== 双等号,还有检测包含关系的功能?
哦,原来是while在一级一级比较,我看成是IF了
小弟新手,运行了一下 你的代码,但是提示有脚本错误
当点击document的时候 提示
obj.tagName 错误
后来 我在while中加上了obj.tagNam才可以
while (obj != undefined && obj != null && obj.tagName&&obj.tagName.toUpperCase() != ‘BODY’)
不知是我的浏览器问题 还是大哥的代码问题
@maml, 不知道是什么浏览器,能不能提供完整的源码?
@,
Insert title here
function isParent (obj,parentObj){
while (obj != undefined && obj != null && obj.tagName && obj.tagName.toUpperCase() != ‘BODY’)
{
if (obj == parentObj)
{
return true;
}
obj = obj.parentNode;
}
return false;
}
//判断点击对象的 父亲是不是$(“.floatLayer”)[0]
$(function(){
$(document).click(function(event){
if(!isParent(event.target, $(“.floatLayer”)[0]))
{
$(“.floatLayer”).hide();
}
});
});
如果拿掉 while中 拿掉obj.tagName
则在ie7和 火狐下 都有问题
源代码:
function isParent (obj,parentObj){
while (obj != undefined && obj != null && obj.tagName.toUpperCase() != ‘BODY’)
{
if (obj == parentObj)
{
return true;
}
obj = obj.parentNode;
}
return false;
}
//判断点击对象的 父亲是不是$(“.floatLayer”)[0]
$(function(){
$(document).click(function(event){
if(!isParent(event.target, $(“.floatLayer”)[0]))
{
$(“.floatLayer”).hide();
}
});
});
ie7 ie8 火狐
这样性能不太好~