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

V2EX = way to explore

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

现在注册

已注册用户请登录

这是一个创建于 1666 天前的主题，其中的信息可能已经有所发展或是发生改变。

老哥们帮忙

DOM

HTML

哥们

假设

20 条回复 • 2020-04-17 14:30:18 +08:00

loading

2020-04-17 13:12:40 +08:00 via Android

click event
this

wangyzj

2020-04-17 13:38:14 +08:00

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

azcvcza

2020-04-17 13:41:28 +08:00

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

kaiki

2020-04-17 13:44:00 +08:00

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

pota

2020-04-17 13:48:19 +08:00

xpath ？

vivipure

2020-04-17 13:53:09 +08:00

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

iyaozhen

2020-04-17 13:55:03 +08:00

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

imhxc

2020-04-17 13:56:46 +08:00

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

wangyzj

2020-04-17 14:05:50 +08:00

@iyaozhen 可以这么说

wangyzj

2020-04-17 14:07:33 +08:00

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

wangyzj

2020-04-17 14:08:51 +08:00

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

ESeanZ

2020-04-17 14:10:13 +08:00

点过的元素都加个参数？

superrichman

2020-04-17 14:13:26 +08:00

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

搜索
function getXPath

wangyzj

2020-04-17 14:14:55 +08:00

@superrichman 好像有点意思

imhxc

2020-04-17 14:15:48 +08:00

@wangyzj

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

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

wangyzj

2020-04-17 14:19:53 +08:00

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

imhxc

2020-04-17 14:23:09 +08:00

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

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

wangyzj

2020-04-17 14:25:25 +08:00

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

zhw2590582

2020-04-17 14:27:32 +08:00

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

wangyzj

2020-04-17 14:30:18 +08:00

@zhw2590582 好东西，谢谢哦