用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>
分享到：
相关推荐
在进行Web开发时，尤其是在涉及鼠标事件和动态界面交互的情况下，我们常常需要判断一个DOM元素是否为另一个元素的子元素。这一功能是通过JavaScript语言实现的，它允许我们用编程的方式操纵网页内容，提供交互体验。...
因此，`jQuery.fn.isChildOf`函数就是利用这个特性来判断元素是否是另一个元素的子元素： ```javascript jQuery.fn.isChildOf = function(b) { return (this.parents(b).length > 0); }; ``` 这里，`b`参数是希望...
- `li:nth-last-child(3):first-child ~ li:nth-last-child(1)` 选择第一个子元素之后的第一个元素，即第三个子`<li>`，并将其宽度设置为`calc(100% / 4)`，颜色设为红色。 - `li:nth-last-child(3):first-child ~...
例如，我们想知道一个`<ul>`标签是否包含至少一个`<li>`子元素。这时可以使用`has()`方法，它返回一个包含匹配指定选择器的子元素的jQuery对象。如果该集合长度为0，表示未找到匹配的子元素。以下是一个例子： ```...
在jQuery库中，判断元素的子元素是否存在是常见的操作，这对于动态内容的处理和交互设计至关重要。以下将详细解释如何使用jQuery进行此类判断，并提供多种示例代码。 首先，我们来看一个基本的示例，判断ID为`...
之后，通过`parentNode`属性获取每个子元素的父节点，判断该父节点是否为原始目标元素或其直接的子元素，以此确保只保留第一级子元素。 需要注意的是，这个方法并不适用于处理复杂的嵌套结构，因为当子元素的父元素...
首先判断元素的父节点是否为空（即元素是否已经被删除或尚未添加到文档中），以及元素的样式 `display` 是否为 `none`（表示元素不显示），如果这两种情况中任何一种成立，则返回 `false`，意味着无法获取位置。...
可以使用js完成子元素的判断，但是这里我使用css来完成 核心知识点 使用css选择器完成子元素的判断 例子： 用css选择器匹配只有一个元素 div { &:last-child:nth-child(1) { // 相关样式 } } 很好理解：div下面...
综合上述内容，可以得出JavaScript判断鼠标位置是否在特定div中的方法主要是通过获取鼠标事件的坐标信息，并结合元素的位置和尺寸属性来判断。通过这种方式，我们可以为用户提供更加丰富和动态的交互体验。
`contains`方法用来检查调用它的元素是否包含另一个元素。如果`contains(obj)`返回true，说明鼠标并没有从子元素完全移出到父元素之外，因此不应当触发父元素的onmouseout事件，函数通过`return false`提前结束，...
这可以通过设置插件选项来实现，例如，可以传递一个包含忽略元素选择器的数组，以便插件在判断是否隐藏元素时跳过这些元素。 使用clickOutHide插件的基本步骤如下： 1. 在HTML文档中引入jQuery库和clickOutHide.js...
从一个索引序号，很容易得到该索引对应的子节点或者子元素，直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行。 但反过来，已知一个节点或元素对象，要知道它的索引序号则没有那么直接了。 ...
然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。 3. document.getElementsByTagName(tagName)：该方法是通过节点的 Tag 获取节点，同样该方法也是返回一个数组，例如：document....
- **事件委托**：通过监听父级元素上的事件来处理子元素的交互，避免为每个子元素单独绑定事件。 - **属性操作**：除了 `getAttribute` 外，还可以使用 `setAttribute` 来设置属性值，使用 `removeAttribute` 删除...
确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含（元素，针） 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
这种方法的思路是将数组元素拼接成一个字符串，然后通过判断字符串中是否存在连续相同的子字符串来确定数组中是否有重复元素。具体步骤如下： 1. 首先创建一个数组，比如 var ary = new Array("111","22","33","111...