Javascript Js mouseClick事件似乎在错误的emelent上触发

我有一个简单的div，我在其中添加了一个child。我试图用evt.clientX和clientY计算孩子的位置。相反，我似乎得到了包含元素的坐标，即使函数在divs上

如何获取div而不是父级的click事件？我对事件继承知之甚少，即使它被称为事件继承

代码如下：

函数initRipple（）{
//qck定义
让我们来谈谈；
rcont=Array.from（document.getElementsByClassName（'ripple'）；
rcont.forEach（功能（el）{
el.addEventListener（'click'，函数（evt）{
纹波（el，evt）；
});
});
}
功能波动（el、evt）{
//qck def
设cir，x，y；
//赋值
cir=document.createElement（'div'）；
x=evt.clientX；
y=evt.clientY；
//修改圆属性/位置
cir.classList.add（'ripple-bubble'）；
cir.style.left=`${x-12}px`；
cir.style.top=`y-12}px`；
cir.addEventListener（'animationend'，function（）{
设oldChild=el.removeChild（cir）；
});
el.appendChild（cir）；
}
initRipple（）
body{背景色：#555}
#小报{
显示：内联块；
列表样式类型：无；
位置：绝对位置；
排名：0；
身高：100%；
显示器：flex；
}
#tablinks#tablinks线{
高度：3倍；
位置：绝对位置；
底部：0；
左：0；
最小宽度：24px；
背景色：#6DADFF；
过渡：所有0.3秒缓解；
指针事件：无；
变换：translateZ（0）；
}
#tablink，tablink{
高度：56px；
线高：56px；
颜色：rgba（255，255，255，0.7）；
}
#tablink.tablink.active{
颜色：#fff；
}
#tablink.tablink a{
显示：内联块；
高度：56px；
线高：56px；
文字装饰：无；
填充：0 24px；
字体大小：13px；
颜色：继承；
大纲：无；
字体家族：robotomedium；
字号：100；
}
.涟漪{
位置：相对位置；
溢出：隐藏；
}
.涟漪，涟漪泡泡{
动画：涟漪效应1秒缓进；
宽度：24px；
高度：24px；
位置：绝对位置；
变换：translateZ（0）；
背景色：rgba（255、255、255、0.2）；
边界半径：50%；
指针事件：无；
不透明度：0.7；
}
@关键帧涟漪效应{
从{
变换：比例（1）；
不透明度：0.7；
}
到{
转换：量表（12）；
不透明度：0；
}
}




您的代码的问题在于clientX与整个页面相关，而不是与事件相关

一个快速的解决方案是将x的计算更改为susbtract元素的x位置

x = evt.clientX;
y = evt.clientY;
const rect = evt.target.getBoundingClientRect()
x -= rect.x;
y -= rect.y;

这是一支工作笔：
谢谢：）我希望他们现在已经制作了一个函数，可以提供与元素相关的坐标，但是这个函数很好地工作。再次感谢。