原生js的e.target.closest()方法
closest()方法,首先检查当前元素是否匹配,如果匹配则直接返回当前元素本身;如果不匹配则沿着dom树一层一层向上查找祖先元素,直到找到匹配的祖先元素为止;如果都不不匹配则返回空null。
用法:比如,有一个ul列表,当点击ul里面的内容时,让ul的边框变成粉色。
点击前:
点击后:
可以看到,当点击文本click me时,当前元素【e.target】就是<b>Click me!</b>,e.target.closest('ul'),会从当前元素开始查找是不是ul,发现不匹配;则直接向父级【li】查找是不是ul,发现也不匹配;接着向祖先【ul】查找是不是ul,发现是ul匹配。则这个ul就是我们要找的元素。则这个ul的边框颜色变成粉色。
附示例源代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>li { margin: 3px; padding: 3px; background: #EEEEEE; }li.hilight { background: yellow; }
</style>
</head>
<body><ul><li><b>Click me!</b></li><li>You can also <b>Click me!</b></li></ul>
<script>window.onload = function(){document.onclick=function(e){console.log('e.target=========',e.target)e.target.closest('ul').style.border = '2px solid pink'}}
</script>
</body>
</html>
原生js的e.target.closest()方法相关推荐
- 原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
- 原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
- 漫谈原生JS添加元素的两种方法
漫谈原生JS添加元素 常规方法 常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过 ...
- 原生JS查找相邻元素——siblings方法
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素,但在JS中并没有这样的方法,可以用previousSibling和nextSibling结合来实现. 不过在JS中 ...
- 原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- 原生JS实现轮播图 方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现 具有往左往右滑动的效果 演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...
- 原生js实现on与off 方法
使用过jQuery的同学,应该对事件绑定方法 .on() .off() 有一定的了解. 在个人类库jTool 中实现了这两个方法,这里就来细说下原生实现方式. 实现方式 以下为个人类库jTool 中 ...
- 【数组方法大合集】原生js数组array常用工具方法大合集
var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...
- css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性 如:elm.setAttribute('style','c ...
- 用原生JS读写CSS样式的方法总结
一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test ...
最新文章
- Image-to-Image的论文汇总
- python生成器使用场景桌面_Python – 如何更简洁地使用生成器?
- 关注点分离之RestTemplate的错误处理
- where is the oracle 12c logfile
- gcc/g++命令参数笔记
- mysql 控制台全是_Mysql控制台命令大全
- sun game server (sgs)初探
- RPi 树莓派 DSI 接口研究 MIPI raspberry pi
- Dell R710服务器磁盘恢复数据库一例(记录)
- 设置背景图时防止图片拉伸的解决方法
- Java之Integer源码
- PLIP--Linux 并口网络解决方法
- 手动挡五个档位示意图_小型C1手动挡汽车档位分布示意图
- 【CodingNoBorder - 10】无际软工队 - 求职岛:ALPHA 阶段事后分析
- python 判断素数
- 抖音去水印,快手去水印,皮皮虾去水印操作方法(2019.6.12有效)
- NTP时钟源(GPS时间源)介绍与分析
- 【深度学习】搭建类似LeNet-5网络识别Fashion-MNIST数据集(衣服,鞋子等)
- 将分子SMILES生成DGLGraph
- Swift 语言的设计错误
热门文章
- 使用C2Prog烧写程序
- 用python生成个性二维码生成器_Python 生成个性二维码
- airflow问题系列2 —— task保持running假死状态
- ultravnc download windows 7,ultravnc download windows 7软件的4大优势
- HTML5视频自动循环播放
- 中译英提升:准译员如何“假装”自己很地道?丨打死个翻译官2.4
- android反编译脱壳,Android脱壳圣战之---如何脱掉爱加密家的保护壳
- 阿里云云计算ACP学习(八)---网络与VPC
- 2010节假日安排通知
- 四叉树 Quadtrees