js判断一个元素是否为另一个元素的子元素
用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="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>