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

2023-11-11

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>

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

原生js的e.target.closest()方法 的相关文章

  • 将客户端生成的响应作为下载进行流式传输,无需 Service Worker

    假设我有一个在客户端生成的大文件 我希望允许用户将其保存到他们的硬盘驱动器上 通常的方法是创建一个 Blob 然后为其创建一个对象 URL const blob new Blob chunks type application exampl
  • WebGL iOS 渲染为浮点纹理

    我正在尝试在 iOS Safari 上的 WebGL 中渲染浮点纹理 而不是在本机应用程序中 我已经设法让 iOS 读取手动 例如从 JavaScript 创建的浮点纹理 但是当我创建浮点类型的帧缓冲区并使用 GPU 渲染到其中时 它不起作
  • 在 Javascript 中,有什么方法可以知道从哪个主机脚本加载?

    在javascript中 作为从某个主机加载的脚本 有什么方法可以知道我是从哪个服务器 主机加载的 我需要向该主机发出额外的 ajax 请求 并且更愿意动态地找出主机 因此 如果您在页面上包含 javascript 文件 当该 javasc
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • 解释 javascript 中的奇怪行为

    我在推特上看到了这个 我也无法解释 定义一个onload函数按以下两种方式工作 1 JSFiddle http jsfiddle net 6rq9k 2 JSFiddle http jsfiddle net 6rq9k 1
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • apollo 客户端从存储中删除而不发生突变

    我需要通过 id 从本地存储中删除一条 记录 而不使用突变 因为服务器不支持突变 我尝试像这样手动访问商店 delete this apolloClient store getState apollo data 1112 这会删除记录 但是
  • 两个日期之间间隔 15 分钟 javascript

    问题 我需要将两个日期 时间戳之间的所有 15 分钟时隙 日期格式 2016 08 10 16 00 00 创建为 HH mm 格式的数组 其中分钟限制为 00 15 30 45 示例 中午 12 30 到下午 2 30 将 gt 12 3
  • javascript onclick 进入新窗口

    这是我的代码
  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh
  • React TypeError:x 不是函数

    我在子组件中从父组件调用函数 booksRefresh 但出现错误 类型错误 booksRefresh 不是函数 我不知道为什么 因为 booksRefresh 是一个函数 有人可以帮我解释为什么会出现这个错误吗 这是我的代码 import
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM
  • 如何在 ionic2 中 pop() 之后重新加载 ion-page

    我有2页Page1 and Page2 我用过this nav pop 在Page2中 它将弹出Page2 Page1将启用 但我想刷新Page1 先感谢您 您可以将父页面与导航推送一起传递 这样您就可以将父页面作为 navParamter
  • 开玩笑 setTimeout 不暂停测试

    it has working hooks async gt setTimeout gt console log Why don t I run expect true toBe true 15000 我已经查看了这个答案 Jest 文档和几

随机推荐

  • el-table滚动加载、懒加载(自定义指令)

    我们在实际工作中会遇到这样的问题 应客户要求 某一个列表不允许分页 但是不分页的话 如果遇到大量的数据加载 不但后端响应速度变慢 前端的渲染效率也会降低 页面出现明显的卡顿 那如何解决这个问题呢 我们可以用模拟分页 当滚动条滚动到底部时再次
  • 04 C/C++ math库详解

    本文转载链接 https blog csdn net AnthongDai article details 78696573 04 math库的详解 1 cos 函数 cos example include
  • CDC问题的解决方案总结

    CDC 不同时钟之间传数据 问题是ASIC FPGA设计中最头疼的问题 CDC本身又分为同步时钟域和异步时钟域 这里要注意 同步时钟域是指时钟频率和相位具有一定关系的时钟域 并非一定只有频率和相位相同的时钟才是同步时钟域 异步时钟域的两个时
  • Redis之哨兵模式解读

    目录 基本介绍 单哨兵模式 多哨兵模式 哨兵的本质 配置哨兵模式 故障恢复原理 哨兵监控工作流程 哨兵模式缺点 基本介绍 当主服务器宕机后 需要手动把一台从服务器切换为主服务器 这就需要人工干预 费事费力 还会造成一段时间内服务不可用 这不
  • Vue前端路由

    路由概念 SPA 单页面应用程序 中 前端路由 router 就是对应关系 Hash地址与组件间对应关系 工作方式 用户点击页面上的路由链接 导致URL地址栏中Hash值发生变化 前端路由监听到Hash地址变化 前端路由把当前Hash地址对
  • 使用docker安装部署kuboard并导入k8s集群

    1 官网地址 https kuboard cn install v3 install html kuboard v3 x E7 89 88 E6 9C AC E8 AF B4 E6 98 8E 2 找到推荐的安装方式 先点击左上角的安装 3
  • 1秒30000QPS,前后端设计思路

    A1 作者 李道兵 没做过支付 不考虑细节 随便聊聊 1 首先要解决掉数据库的压力 3万qps对应的磁盘 iops 很大 不过现在好的 SSD 能提供很好的 iops 比如这款 ARK Intel SSD DC P3700 Series 8
  • android 4.2版本的sdcard文件目录分析

    1 今天遇到一个问题 修改已经解决 1 首先看看真机测试下的文件结构 2 简单介绍android文件结构的作用 以下是几个重要目录 文件的说明 1 mnt 挂载点目录 2 etc 系统主要配置文件 3 system Android 系统文件
  • ios-设置状态栏颜色(电池颜色)

    iOS 状态栏的两种形式 白底黑字和黑底白字 UIStatusBarStyleLightContent UIStatusBarStyleDefault 设置方法如下 1 Info plist文件添加一行 2 要改变的VC中添加代码 void
  • Android自定义Dialog仿IOS的Dialog

    由于时间原因 没有详细整理 直接拿网上代码 先看看效果 首先 布局文件 activity main xml
  • 抖音小程序如何运营;怎么快速变现赚钱。

    随着LBS 企业号和购物车等能力的上线 抖音早已不是单纯的短视频APP了 抖音正在成为一个融合了线上线下的全新导流平台 而随着抖音小程序的上线 标志着抖音正式完成变现转型 那么抖音小程序有哪些优势 又是怎么貝兼钱的呢 今天 我们就来了解下如
  • 华为OD机试 - 玩牌高手(Java)

    题目描述 给定一个长度为n的整型数组 表示一个选手在n轮内可选择的牌面分数 选手基于规则选牌 请计算所有轮结束后其可以获得的最高总分数 选择规则如下 在每轮里选手可以选择获取该轮牌面 则其总分数加上该轮牌面分数 为其新的总分数 选手也可不选
  • 多传感器融合之雷达图像数据集自动生成 - 20220613

    文章目录 Automatic Radar Camera Dataset Generation for Sensor Fusion Applications 1 Radar Camera Co Calibration 2 ROS pipeli
  • 集成第三方单点登录JIRA(Colfluence同理)

    jira单点登录原理 jira单点登录依赖于seraph插件 在searph的配置文件中引入我们自定义的验证类 类似一个过滤器 jira登录时会解析代码中的逻辑 具体内部实现逻辑自己定义 如header token cookie等等形式 j
  • 获取单选框选中值提交到数据库

    获取单选框选中值提交到数据库 开发工具与关键技术 VS2015 ASP NET MVC 撰写时间 2019 08 08 先说明一下我这两个单选框的作用 就比如说我做的这个是一个商品单位的属性 是允许小数或者不允许小数的 比如手机是一台的 台
  • 公司招人,面了一个5年经验不会自动化的测试人,他凭什么要18K?

    在深圳这家金融公司也待了几年 被别人面试过也面试过别人 大大小小的事情也见识不少 今天又是团面的一天 一百多个人都聚集在一起 因为公司最近在谈项目出来面试就2个人 无奈又被叫到面试房间 整个过程我都是非常认真负责的 不管是有经验的还是没经验
  • 自学之Python常用库——logging

    logging库日志级别 默认的级别是warning 级别 级别数值 使用时机 DEBUG 10 详细信息 常用语调试 INFO 20 程序正常运行过程中产生的一些信息 WARNING 30 警告用户 虽然程序还在正常工作但有可能发生错误
  • ch340非一键下载电路烧录esp8266程序

    esp8266 ch340非一键下载电路烧录问题的解决 前些天对智能家居很感兴趣 在网上看了一些关于esp8266的开发视频后 就从淘宝入手了一些小玩意儿 原先以为用ch340就可以实现esp8266一键下载呢 事实上却没有那么简单 笔者受
  • flutter报错记录:java.lang.IllegalAccessError: class org.gradle.internal.compiler.java.ClassNameCollector

    在一天新电脑上运行flutter项目时 项目一直跑不起来 详细的报错内容 java lang illegalaccesserror class org gradle internal compiler java classnamecolle
  • 原生js的e.target.closest()方法

    closest 方法 首先检查当前元素是否匹配 如果匹配则直接返回当前元素本身 如果不匹配则沿着dom树一层一层向上查找祖先元素 直到找到匹配的祖先元素为止 如果都不不匹配则返回空null 用法 比如 有一个ul列表 当点击ul里面的内容时