如何在一个 html 中记录鼠标点击的元素，假设所有 dom 都没有 id

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2203 days ago, the information mentioned may be changed or developed.

老哥们帮忙

DOM

HTML

哥们

假设

20 replies • 2020-04-17 14:30:18 +08:00

loading

Apr 17, 2020 via Android

click event
this

wangyzj

Apr 17, 2020

@loading 可我要把我点击的元素是什么记录下来，按照你这个我要记录什么
offsetparent 可以
就是层数太多会很麻烦

azcvcza

Apr 17, 2020

在 body 上添加监听器，然后记录？
或者看看其他带佬关于前端埋点的文章

kaiki

Apr 17, 2020

把他当 this，然后给 this 加 id ？

pota

Apr 17, 2020

xpath ？

vivipure

Apr 17, 2020

document.addEventListener('click',function(e) {
console.log(e.target.style.color='red')
})

iyaozhen

Apr 17, 2020

@wangyzj 你是想记录这个元素的 css selector 路径是吧

imhxc

Apr 17, 2020

如果你要记录这个元素，如果不用 ID，好像没有太好的办法，因为你 DOM 结构是变化的。

wangyzj

Apr 17, 2020

@iyaozhen 可以这么说

wangyzj

Apr 17, 2020

@imhxc 如果假设 dom 结构都是后台渲染静态不变呢？

wangyzj

Apr 17, 2020

@pota 我想过这个
但是 xpath->dom 容易
dom 反查 xpath 咋整
貌似还得我说的那个 offsetparent 那种

ESeanZ

Apr 17, 2020

点过的元素都加个参数？

superrichman

Apr 17, 2020

https://stackoverflow.com/questions/3454526/how-to-calculate-the-xpath-position-of-an-element-using-javascript/3454579

搜索
function getXPath

wangyzj

Apr 17, 2020

@superrichman 好像有点意思

imhxc

Apr 17, 2020

@wangyzj

> 如果假设 dom 结构都是后台渲染静态不变呢？

你怎么保证后续开发不会影响到 DOM 结构？

wangyzj

Apr 17, 2020

@imhxc 我说的意思就是假设不变
如果变的话就要重新记录了

imhxc

Apr 17, 2020

@wangyzj 嗯嗯不变最好了。那就用楼上推荐的方法，我个人优先推荐 xpath，其次 css selector 。

另外，也可以尝试对每个版本保存一个结构快照，用于比对多个版本下的点击是属于同一个元素，不过这只是我一个想法，不知道是否可行。

wangyzj

Apr 17, 2020

@imhxc 肯定对每个版本都有记录，记录只能对应版本
否则就算是全有 id 也没发控制

zhw2590582

Apr 17, 2020

前几天看到过类似的库，从 DOM 反查唯一选择器 https://github.com/fczbkk/css-selector-generator

wangyzj

Apr 17, 2020

@zhw2590582 好东西，谢谢哦