H5页面中获取点击坐标信息

广告位埋点需求:H5 页面中记录广告区域内的点击坐标信息。

● etStart 按下时间 时间戳

● downX 按下相对屏幕 x 坐标

● downY 按下相对屏幕 y 坐标

● rDownX 按下相对广告 x 坐标

● rDownY 按下相对广告 y 坐标

● etEnd 抬起时间 时间戳

● upX 抬起相对屏幕 x 坐标

● upY 抬起相对屏幕 y 坐标

● rUpX 抬起相对广告 x 坐标

● rUpY 抬起相对屏幕 y 坐标

解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
var adE = document.getElementsByClassName('ad')[0]
adE.addEventListener('mousedown', function (e) {
adCoord.etStart = Date.now()
adCoord.downX = e.screenX
adCoord.downY = e.screenY
adCoord.rDownX = e.offsetX
adCoord.rDownY = e.offsetY
})
adE.addEventListener('mouseup', function (e) {
adCoord.etEnd = Date.now()
adCoord.upX = e.screenX
adCoord.upY = e.screenY
adCoord.rUpX = e.offsetX
adCoord.rUpY = e.offsetY
})
var closeE = document.getElementsByClassName('close')[0]
closeE.addEventListener('mousedown', function (e) {
closeCoord.etStart = Date.now()
closeCoord.downX = e.screenX
closeCoord.downY = e.screenY
closeCoord.rDownX = e.pageX - closeE.offsetParent.offsetLeft
closeCoord.rDownY = e.pageY - closeE.offsetParent.offsetTop
})
closeE.addEventListener('mouseup', function (e) {
closeCoord.etEnd = Date.now()
closeCoord.upX = e.screenX
closeCoord.upY = e.screenY
closeCoord.rUpX = e.pageX - closeE.offsetParent.offsetLeft
closeCoord.rUpY = e.pageY - closeE.offsetParent.offsetTop
})
</script>

相关链接

[1] Web 开发技术 > 事件参考