原生js的e.target.closest()方法

最新推荐文章于 2023-08-21 18:09:17 发布

cherry_vincent

最新推荐文章于 2023-08-21 18:09:17 发布

阅读量3.3k

点赞数 2

分类专栏： Web前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cherry_vicent/article/details/128190281

版权

Web前端专栏收录该内容

41 篇文章 13 订阅

订阅专栏

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>