Javascript 为什么在同一位置单击时mouseEvent.offset不同

我想知道为什么在同一个地方单击时，

e.offsetX

和

e.offsetY

是不同的。 对于第一次点击按钮

e.offsetX

和

e.offsetY

是正确的，但如果在旧ripple之前点击按钮，则收到的事件具有不正确的

e.offsetX

和

e.offsetY

（始终在0左右）。由于这种行为，如果我快速多次单击按钮，我的涟漪效果的位置不正确

• 为什么此事件具有这样的

  e.offsetX

  和

  e.offsetY

• 如何在不使用

  e.target

  的情况下确定涟漪效应的位置

const-button=document.querySelector（'button'）；
按钮。addEventListener（'单击'，（e）=>{
常量ripple=document.createElement（'span'）；
ripple.style.left=`${e.offsetX}px`；
ripple.style.top=`${e.offsetY}px`；
按钮。追加子项（涟漪）；
window.setTimeout（（）=>{
ripple.remove（）；
}, 1000);
});
按钮{
溢出：隐藏；
位置：相对位置；
宽度：200px；
高度：200px；
边框：2件纯黑；
}
按钮>跨度{
位置：绝对位置；
背景颜色：绿色；
边界半径：50%；
宽度：1px；
高度：1px；
动画：ripple 1.0s线性无限；
}
@关键帧波纹{
0% {
不透明度：0.7；
}
100% {
不透明度：0；
变换：比例（1000）；
}
}
Test
offsetX
和
offsetY
返回事件在
当前目标
非目标上的位置。因此，当您第二次单击时，您的目标是刚刚创建的跨度。
我要做的是向span css添加
指针事件：none

另一种方法是使用
offsetX
offsetX
和
offsetY
返回事件在
当前目标上的位置。因此，当您第二次单击时，您的目标是刚刚创建的跨度。
我要做的是向span css添加
指针事件：none

另一种方法是使用
offsetX
我认为这是因为最终得到的是波纹跨度的
偏移量，而不是按钮。添加包含div（如下所示）可以修复它：


const-button=document.querySelector（'button'）；
const div=document.querySelector（'div'）；
按钮。addEventListener（'单击'，（e）=>{
常量ripple=document.createElement（'span'）；
ripple.style.left=`${e.offsetX}px`；
ripple.style.top=`${e.offsetY}px`；
子分部（涟漪）；
window.setTimeout（（）=>{
ripple.remove（）；
}, 1000);
});
div{
溢出：隐藏；
位置：相对位置；
宽度：200px；
高度：200px；
边框：2件纯黑；
}
钮扣{
宽度：100%；
身高：100%；
}
跨度{
位置：绝对位置；
背景颜色：绿色；
边界半径：50%；
宽度：1px；
高度：1px；
动画：波纹0.6s线性无限；
}
@关键帧波纹{
0% {
不透明度：0.7；
}
100% {
不透明度：0；
变换：比例（1000）；
}
}

试验
我认为这是因为最终得到的是波纹跨度的偏移量，而不是按钮。添加包含div（如下所示）可以修复它：


const-button=document.querySelector（'button'）；
const div=document.querySelector（'div'）；
按钮。addEventListener（'单击'，（e）=>{
常量ripple=document.createElement（'span'）；
ripple.style.left=`${e.offsetX}px`；
ripple.style.top=`${e.offsetY}px`；
子分部（涟漪）；
window.setTimeout（（）=>{
ripple.remove（）；
}, 1000);
});
div{
溢出：隐藏；
位置：相对位置；
宽度：200px；
高度：200px；
边框：2件纯黑；
}
钮扣{
宽度：100%；
身高：100%；
}
跨度{
位置：绝对位置；
背景颜色：绿色；
边界半径：50%；
宽度：1px；
高度：1px；
动画：波纹0.6s线性无限；
}
@关键帧波纹{
0% {
不透明度：0.7；
}
100% {
不透明度：0；
变换：比例（1000）；
}
}

试验
我也会考虑从动画中删除<代码>无限<代码>，因为这就是为什么你的涟漪效应会触发2次而不是一次。我也会考虑从动画中删除<代码>无限< /代码>，因为这就是为什么你的涟漪效应会激发2次而不是一次。