本文旨在解决在 JavaScript 中，当 CSS 缩放动画正在进行时，如何获取元素缩放完成后的 `offsetX` 和 `offsetY` 值的问题。通过引入一个辅助的、无过渡的 `div` 元素，并将其放置在目标图像的下方，可以模拟缩放后的最终状态，从而准确获取鼠标在缩放完成后的位置信息。这种方法无需等待动画结束，即可立即获得目标值，提升用户体验。
在进行 CSS 缩放和过渡动画时，直接使用 event.offsetX 和 event.offsetY 获取的鼠标位置是动画过程中的瞬时值，而不是动画结束后的最终值。这在需要基于最终缩放比例进行计算或操作的场景下会带来问题。以下提供一种解决方案，通过添加一个辅助元素来解决这个问题。
解决方案：使用辅助 Div 模拟最终状态
该方案的核心思想是在目标图像下方创建一个不可见的 div 元素，该元素在缩放时没有过渡效果，立即达到最终的缩放比例。然后，将点击事件绑定到这个 div 元素上，通过它来获取鼠标位置信息。
1. HTML 结构调整：
立即学习“Java免费学习笔记（深入）”；
将目标图像 img 和辅助 div 放入一个容器 div#wrapper 中。辅助 div#target 覆盖整个图像区域，并负责接收点击事件。
@@##@@
2. CSS 样式设置：
- #wrapper: 使用 inline-block 和 position:relative，使其可以包裹内容并作为绝对定位元素的参考。font-size:0 避免了inline-block元素之间的空白问题。
- #target: 使用 position:absolute，使其完全覆盖图像。width:100%; height:100%; 保证其大小与图像一致。
- #img: transition: 5s ease 设置缩放动画。z-index:2 保证图像显示在辅助 div 的上方。pointer-events:none 禁用图像的鼠标事件，确保点击事件传递到辅助 div。
#wrapper {
display: inline-block;
position:relative;
font-size:0;
}
#target{
position:absolute;
width:100%;
height:100%;
}
#img {
transition: 5s ease;
z-index:2;
pointer-events:none;
}3. JavaScript 代码：
- onButton(): 除了缩放图像 img，还需要同步缩放辅助 div#target。确保 target 的缩放比例与 img 相同。
- onImage(): 点击事件绑定在 target 上，所以 event.offsetX 和 event.offsetY 获取的是缩放完成后的位置信息。
function onButton() {
const img = document.querySelector("#img");
img.style.scale = 5.0;
const target = document.querySelector("#target");
target.style.scale = 5.0;// make sure target's style matches img's style
}
function onImage(event) {
console.log(event.offsetX, event.offsetY);
}代码示例（完整）：
@@##@@
注意事项：
- 确保辅助 div 的缩放比例与图像的最终缩放比例一致。
- pointer-events:none 属性是关键，它允许点击事件穿透图像，传递到辅助 div。
- 如果需要更复杂的交互，可以考虑使用事件委托，将事件监听器绑定到 wrapper 上。
总结
通过引入辅助 div 元素，可以有效地解决 CSS 缩放动画期间 event.offsetX 和 event.offsetY 值不准确的问题。这种方法简单易懂，能够快速获取缩放完成后的鼠标位置信息，为后续的计算和操作提供准确的数据支持，提升用户体验。这种技巧在需要处理动画过程中鼠标事件的场景中非常有用。
