js判断一个元素是不是为另一个元素的子元素
日期：2014-05-16 浏览次数：20394 次
用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>
