javascript判断一个元素是另外一个元素的子元素
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]));
});
感觉还挺好用,但是在jQuery应用中还是有很多缺陷,比如多个元素的时候写起来就不是很方便。所以写了比较简单的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”));
});
javascript判断一个元素是另外一个元素的子元素的更多相关文章
- js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 ove ...
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- 在css中 父元素不固定高度,怎样实现子元素的高度100%
父元素使用 position: relative; 子元素使用 position: absolute; height: 100%;
- 改变父元素的透明度,不影响子元素的透明度—css
1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...
- div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。
HTML: <div class="edt_title" > <div id="edt_title"> <p class=&quo ...
- 父元素设置overflow,绝对定位的子元素会被隐藏或一起滚动
一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...
- div高度自适应(父元素未知,所有高度跟随子元素最大的高度)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【数据结构】10分钟教你用栈求解迷宫老鼠问题超详细教程附C++源代码
问题描述 给定一张迷宫地图和一个迷宫入口,然后进入迷宫探索找到一个出口.如下图所示: 该图是一个矩形区域,有一个入口和出口.迷宫内部包含不能穿越的墙壁或者障碍物.这些障碍物沿着行和列放置,与迷宫的边界 ...
- noip提高组模拟赛(QBXT)T2
T2count题解 [ 问题描述]: 小 A 是一名热衷于优化各种算法的 OIER,有一天他给了你一个随机生成的 1~n 的排列, 并定 义区间[l,r]的价值为: \[ \huge C_{l,r}= ...
- 2016级算法第二次上机-F.ModricWang's Number Theory II
891 ModricWang's Number Theory II 思路 使得序列的最大公约数不为1,就是大于等于2,就是找到一个大于等于2的数,它能够整除序列中的所有数. 考虑使得一个数d整除数组中 ...
- Cors Http 访问控制
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
- JavaScript的深拷贝和浅拷贝
一.数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型.. 1.基本数据类型的特点:直接存储在栈(stack ...
- springAOP实现方法运行时间统计
aop的before和after,寻思分别在两个方法里获得当前时间,最后一减就可以了. 因此,今天就探讨了一下这个问题,和大家分享一下. 创建maven工程,引入spring的依赖包,配置好appli ...
- HNOI2018 退役记
HNOI2018 退役记 \(day0\): 除了切水题以外没有什么很重要的事. \(day1\): 进考场发现前面是\(yyb\)?\(orzyyb\) 试题解压密码终于没有奇怪的字符了,一遍打对. ...
- 2. Javscript学习笔记——引用类型
2. 引用类型 2.1 Object类型 Object 是一个基础类型,其他所有类型都从 Object 继承了基本的行为. 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象 ...
- 单臂vlan路由实现过程
单臂路由拓扑图如下: 实现步骤如下: 1)pc的ip自己配置. 2)在交换机的各个端上划分好vlan 下联口:vlan 10 port g1/0/2 vlan 20 port g1/0/3 ...
- oracle mysql的序列的新增、删除、修改及使用
序列的使用 参考文献: https://blog.csdn.net/meijory/article/details/51891529 1.序列介绍 序列: 是 oracle 提供的用于产生一系列唯一 ...