vue获取被点击元素dom定位路径

时间: 2023-10-16 22:07:35 浏览: 44
可以使用 `event.target` 获取被点击的元素,然后通过该元素的 `parentNode` 属性逐级向上查找父元素,直到找到根节点为止。可以使用 `nodeName` 属性来判断当前节点的类型,从而得到定位路径。 以下是示例代码: ```javascript function getDomPath(el) { const path = [] while (el && el.nodeName !== 'HTML') { let selector = el.nodeName.toLowerCase() if (el.id) { selector += '#' + el.id } else if (el.className && typeof el.className === 'string') { selector += '.' + el.className.trim().replace(/\s+/g, '.') } path.unshift(selector) el = el.parentNode } return path.join(' > ') } document.addEventListener('click', function(event) { const path = getDomPath(event.target) console.log(path) }) ``` 在上述示例代码中,我们使用了 `document.addEventListener` 监听了点击事件,然后通过 `getDomPath` 函数获取被点击元素的定位路径,并输出到控制台中。在 `getDomPath` 函数中,我们通过 `while` 循环不断向上查找父元素,并将每一级父元素的选择器存储到 `path` 数组中,最后通过 `join` 方法将所有选择器连接起来。在查找父元素时,我们通过 `nodeName` 属性来判断当前节点的类型,如果是元素节点,我们就可以获取其标签名,并进一步判断其是否有 `id` 或 `className` 属性,从而得到选择器。

相关推荐

最新推荐

recommend-type

vue获取当前点击的元素并传值的实例

下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

vue+高德地图实现地图搜索及点击定位操作

主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

1、是否滚动到底部 isScrollBottom() { // 是否滚动到了底部 this.box = this.$refs.chatListWrapper var clientHeight = this.box.clientHeight var scrollTop = this.box.scrollTop var scrollHeight = ...
recommend-type

Vue 解决通过this.$refs来获取DOM或者组件报错问题

主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

vue获取当前IP所在地天气.docx

原生的vue源代码,使用vue获取当前IP,并且获取到当前所在地天气.docx,亲测有效,有问题可一直私聊我
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

list根据id查询pid 然后依次获取到所有的子节点数据

可以使用递归的方式来实现根据id查询pid并获取所有子节点数据。具体实现可以参考以下代码: ``` def get_children_nodes(nodes, parent_id): children = [] for node in nodes: if node['pid'] == parent_id: node['children'] = get_children_nodes(nodes, node['id']) children.append(node) return children # 测试数
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。