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

最新推荐文章于 2023-01-31 11:36:39 发布

axl234

最新推荐文章于 2023-01-31 11:36:39 发布

阅读量968

点赞数

分类专栏： javascript 文章标签： HTML JavaScript CSS jQuery ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/83943790

版权

javascript 专栏收录该内容

158 篇文章 0 订阅

订阅专栏

用js判断一个元素是否为另一个元素的子元素，做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。

jQuery方式

写了比较简单的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"));
});

js方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js判断一个元素是否为另一个元素的子元素的实例页面</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
<link rel="stylesheet" href="../css/hl.css" type="text/css"/>
<style type="text/css">
.demo {
padding: 30px;
height: 300px;
position: relative;
}
.floatLayer {
position: absolute;
top:50px;
left: 100px;
width: 200px;
height: 200px;
border: 10px solid #FF3300;
padding: 10px
}
ol, ul {
list-style:none;
margin:0;
padding:0
}
.topic-list li {
float:left;
margin-right:15px
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="main">
<h1>js判断一个元素是否为另一个元素的子元素的实例页面</h1>
<div id="body" class="light">
    <div id="content" class="show">
      <div class="demo">
        <div class="floatLayer">
          <h4>这是一个浮层</h4>
          点击浮层内部警告true<br />
          点击浮层外部警告false</div>
      </div>
      <h3>代码</h3>
      <div class="demo">
        <h5>JS代码：</h5>
        <pre name="code" class="js">
function isParent (obj,parentObj){
    while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
        if (obj == parentObj){
            return true;
        }
        obj = obj.parentNode;
    }
    return false;
}

$(document).click(function(event){
alert(isParent(event.target, $(".floatLayer")[0]));
});

        </pre>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
function isParent (obj,parentObj){
    while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
        if (obj == parentObj){
            return true;
        }
        obj = obj.parentNode;
    }
    return false;
}

$(document).click(function(event){
alert(isParent(event.target, $(".floatLayer")[0]));
});

</script>
</body>
</html>

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js判断一个元素是否为另一个元素的子元素

用js判断一个元素是否为另一个元素的子元素，做一些效果的时候经常用到，特别是和鼠标事件相关的应用中，比如一个浮层，在鼠标操作浮层内元素的时候浮层显示，当点击浮层外的元素的时候隐藏浮层。当然方法有很多，不过个人认为通过判断一个元素是否为另一个元素的子元素是最简单的实现方式之一。jQuery方式写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：...
复制链接

扫一扫