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

[wangyzj]

老哥们帮忙

[loading]

click event
this

[wangyzj]

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

[azcvcza]

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

[kaiki]

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

[pota]

xpath ？

[vivipure]

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

[iyaozhen]

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

[imhxc]

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

[wangyzj]

@iyaozhen 可以这么说

[wangyzj]

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

[wangyzj]

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

[ESeanZ]

点过的元素都加个参数？

[superrichman]

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

搜索
function getXPath

[wangyzj]

@superrichman 好像有点意思

[imhxc]

@wangyzj

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

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

[wangyzj]

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

[imhxc]

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

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

[wangyzj]

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

[zhw2590582]

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

[wangyzj]

@zhw2590582 好东西，谢谢哦