js判断一个元素是否为另一个元素的子元素

用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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » js判断一个元素是否为另一个元素的子元素

评论 16

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    直接用contains 方法更加简单 http://blog.csdn.net/encienqi/archive/2011/02/20/6196571.aspx

    hafeyang8年前 (2011-06-09)回复
    • 谢谢 😛

      8年前 (2011-06-09)回复
  2. #-48

    码头兄,你这个方法也挺简单的。原生的contains要去兼容

    情封8年前 (2011-06-11)回复
  3. #-47

    码头兄,你这个方法也挺简单的。原生的contains要去做兼容性

    情封8年前 (2011-06-11)回复
  4. #-46

    这个方法巧,以前都没想到过。。总是先入为主的认为就contains方法。jquery和百度的tangram都是用的contains貌似

    qiqiboy8年前 (2011-06-13)回复
  5. #-45

    这个有点不明白,== 双等号,还有检测包含关系的功能?

    Shadyduan8年前 (2011-06-17)回复
  6. #-44

    哦,原来是while在一级一级比较,我看成是IF了

    Shadyduan8年前 (2011-06-17)回复
  7. #-43

    小弟新手,运行了一下 你的代码,但是提示有脚本错误
    当点击document的时候 提示
    obj.tagName 错误
    后来 我在while中加上了obj.tagNam才可以

    while (obj != undefined && obj != null && obj.tagName&&obj.tagName.toUpperCase() != ‘BODY’)

    不知是我的浏览器问题 还是大哥的代码问题

    maml7年前 (2011-09-07)回复
    • @maml, 不知道是什么浏览器,能不能提供完整的源码?

      7年前 (2011-09-07)回复
      • @,

        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和 火狐下 都有问题

        maml7年前 (2011-09-07)回复
      • 源代码:
        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 火狐

        maml7年前 (2011-09-07)回复
  8. #-42

    这样性能不太好~

    paul7年前 (2011-09-15)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏