利用事件委托和冒泡 判断点击了哪个元素或该元素的子级元素

概述: 通过 event.composedPath() 拿到事件冒泡路径,再循环匹配 获取所需的dom

<template><div @click="handleClick"><div class="child child1"><button>Click Me</button><span>Click Me1</span><div>Click Me2</div></div><div class="child child1"><button>Click Me</button><span>Click Me1</span><div>Click Me2</div><div>Click Me3</div><p>clice</p></div></div>
</template><script>
export default {methods: {handleClick(event) {const composedPath = event.composedPath();// console.log('点击事件冒泡的 DOM 列表:', composedPath);for (const element of composedPath) { //  注意防止子级类名和父级类名相同 childif (element.classList && element.classList.contains('child')) {console.log('找到指定类名为 child 的 DOM 元素:', element);break;}}}}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8310.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

题目4 命令执行(保姆级教程)

url&#xff1a;http://192.168.154.253:84/ #打开http://XXX:81/&#xff0c;XXX为靶机的ip地址 审题 1、打开题目看到有一个提示&#xff0c;此题目需要通过利用命令执行漏洞执行Linux命令获取webshell&#xff0c;最后从根目录下key.php文件中获得flag 2、开始答题 第一步&…

Nginx在springboot中起到的作用

面试时这样回答&#xff1a; 在Spring Boot项目中使用Nginx可以有以下用途&#xff1a; 1. 反向代理&#xff1a;Nginx可以作为反向代理服务器&#xff0c;将外部请求转发到后端的Spring Boot应用&#xff0c;并可以实现负载均衡、高可用、缓存等功能&#xff0c;提高系统的性…

css设置八等分圆

现需要上图样式的布局&#xff0c;我通过两张向右方的图片&#xff0c;通过定位和旋转完成了布局。 问题&#xff1a; 由于是通过旋转获取到的样式&#xff0c;实际的盒子是一个长方形&#xff0c;当鼠标移入对应的箭头时选中的可能是其他盒子&#xff0c;如第一张设计稿可以看…

C++ make_shared pros and cons

高效内存分配 std::shared_ptr<Node> ptr(new Node);上面的代码存在两次内存分配 new Node为ptr分配控制块的内存用于存放引用计数等信息 如果使用std::make_shared只会存在一次内存分配&#xff0c;它会一次性申请足够大的空间用于存储Node和控制块 异常安全 void …

Ngrok 的绝佳替代品,内网穿透神器 Serveo

什么是 Serveo Serveo 是一个免费的内网穿透服务&#xff0c;Serveo 可以将本地计算机暴露在互联网上&#xff0c;官方声称其为 Ngrok 的绝佳替代品。 Serveo 其最大优点是使用现有的 SSH 客户端&#xff0c;无需安装任何客户端软件即可完成端口转发。 Serveo 工作原理很简单…

解密数字孪生:解决实际问题的神奇技术

数字孪生是一种将现实世界与数字世界相连接的创新技术&#xff0c;通过将实际物体或系统的数据和行为模拟到数字平台上&#xff0c;实现真实与虚拟之间的交互和信息共享。数字孪生的应用不仅仅局限于虚拟现实&#xff08;VR&#xff09;和仿真领域&#xff0c;它在解决实际问题…

Socket发送数据---winsock库和boost库

一个是通过winsock库提供的api实现,一个是boost库实现,两个方法都可以,因为项目是vc++6.0实现的,不支持boost库,只能使用winsock库,vc++6.0太老,局限性大。 通过Winsock库提供的API 通过UDP #include<winsock2.h> #include<vector> #include<WS2tcpip.h…

泰晓科技发布 Linux Lab v1.2 正式版

导读近日消息&#xff0c;Linux Lab 是一套用于 Linux 内核学习、开发和测试的即时实验室&#xff0c;官方称其“可以极速搭建和使用&#xff0c;功能强大&#xff0c;用法简单”。 自去年 12 月份发布 Linux Lab v1.1 后&#xff0c;v1.2 正式版目前已经发布于 GitHub 及 Gite…

为什么 Linux 内核协议栈会丢弃 SYN 数据包

最近了解到 SYN 数据包丢弃的问题&#xff0c;网上有一些资料&#xff0c;这里记录分享一下。 serverfault上的重要信息 tcp - No SYN-ACK Packet from server - Server Fault 信息如下&#xff1a; My embedded system with LwIP is the client and I have server1 and ser…

文艺类《匠心》简介及投稿要求

文艺类《匠心》简介及投稿要求 《匠心》期刊简介&#xff1a; 主管单位&#xff1a;内蒙古画报社 主办单位&#xff1a;内蒙古画报社 国际刊号&#xff1a;ISSN:1672-9099 国内刊号&#xff1a;CN:15-1383/J 发行周期&#xff1a;月刊;收录网站&#xff1a;中国知网收录 …

LiveGBS流媒体平台GB/T28181常见问题-TOKEN有效期是多久如何设置token有效期StreamToken和URLToken

LiveGBS中TOKEN有效期是多久如何设置token有效期StreamToken和URLToken 1、获取TOKEN2、TOKEN有效期3、默认token有效期3、自定义token加密key3.1、token_key3.2、stream_token_key 4、如何配置一直有效的token4.1、URLToken4.2、StreamToken 5、动态有效期6、流地址鉴权开启后…

git的使用

git使用 Git操作基本指令&#xff1a;分支操作&#xff1a;操作远程仓库&#xff1a;文件操作比较文件差异删除文件撤销文件重命名文件 操作标签SSH密钥git错误示例1、git status&#xff08;或任何其他git命令&#xff09;然后会出现fatal: Not a git repository (or any of t…

智能管理轻松搞定!文件批量改名并按数量平均分类,自动新建文件夹保存!

我们面对大量文件需要整理和管理时&#xff0c;批量改名和分类是一项繁琐而重要的任务。为了帮助您高效完成这项工作&#xff0c;我们介绍了一种智能方法&#xff1a;按数量平均分类并自动保存文件&#xff0c;让您轻松整理文件夹内容。 首先第一步&#xff0c;我们要进入文件…

swift简单弹幕例子,仿哔哩哔哩

先看例子 每个弹幕的速度都是不一样的&#xff0c;支持弹幕整体开始暂停。 如果弹幕实在是太多了&#xff0c;有个缓冲队列&#xff0c;不停的重试能否显示&#xff0c;保证文字都能显示全&#xff0c;并且每条都能显示。 实现是基于 CADisplayLink 实现的&#xff0c;如此来…

工业以太网的发展历程与应用前景

工业以太网是在工业自动化和物联网领域广泛使用的通信网络&#xff0c;它具有应用广泛、价格低廉、通信速率高、软硬件产品丰富、应用支持技术成熟等优点&#xff0c;目前它已经在工业企业综合自动化系统中的资源管理层、执行制造层得到了广泛应用&#xff0c;并呈现向下延伸直…

Verilog 学习之路(三)——牛客刷题篇

1.输入序列连续的序列检测 题面 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kJH9kHFH-1690301233803)(https://s2.loli.net/2023/07/26/HJPXR2mhbaVCG6d.png)]思路 对于序列检测题目&#xff0c;常规的解法有两种&#xff1a;状态机法和序列缓存…

概率论和随机过程的学习和整理--番外16,N合1的合成问题的求平均个数,次数,阶数

目录 1 问题 2 用条件期望&#xff0c;求合成的次数 2.1 思路1 2.2 思路2 3 用条件期望&#xff0c;求合成的个数 3.1 令X表示用材料1往上合成时&#xff0c;合成材料2的个数 3.2 令Y表示用材料1往上合成时&#xff0c;合成材料3的个数 4 用条件期望&#xff0c;求合成…

基于express调用chatgpt文字流输出和有道智云语音合成

express是基于node.js的一个web框架&#xff0c;可以更加简洁的去创建一个后台服务&#xff0c;由于项目的需要&#xff0c;引入和typescript&#xff0c;经过几天的努力实现了chatgpt文字流输出有道智云语音合成的结合&#xff08;略有遗憾&#xff09;&#xff0c;下面我记载…

现行业供应链数字化转型难的最根本原因是什么?

由于各种原因&#xff0c;行业供应链的数字化转型可能充满挑战。然而&#xff0c;最根本的原因之一是供应链本身固有的复杂性和碎片化。以下是造成这一困难的一些关键因素&#xff1a; 1.缺乏标准化&#xff1a;供应链通常涉及多个组织、系统和流程&#xff0c;这些组织、系统…

删除主表 子表外键没有索引的性能优化

整个表147M&#xff0c;执行时一个CPU耗尽&#xff0c; buffer gets 超过1个G&#xff0c; 启用并行也没有用 今天开发的同事问有个表上的数据为什么删不掉&#xff1f;我看了一下&#xff0c;也就不到100000条数据&#xff0c;表上有外键&#xff0c;等了5分钟hang在那里&…