计算CSS缩放和过渡后的鼠标位置：JavaScript事件偏移的替代方案_技术教程

本文旨在解决在CSS缩放和过渡动画过程中，如何准确获取鼠标相对于最终缩放状态下元素的位置。通过引入一个辅助的不可见元素，并在其上监听点击事件，可以绕过过渡动画的影响，从而获得准确的偏移量。

在Web开发中，经常会遇到需要对元素进行缩放和过渡动画处理的场景。然而，当用户在动画过程中点击元素时，event.offsetX 和 event.offsetY 获取到的值是相对于动画当前帧的，而不是最终状态。这在某些需要基于最终状态进行计算的场景下会造成问题。本文将介绍一种通过引入辅助元素来解决该问题的方法。

问题分析

假设有一个图片元素，通过CSS过渡实现缩放动画。在动画过程中，如果用户点击图片，event.offsetX 和 event.offsetY 返回的是相对于图片当前大小和位置的偏移量。我们需要的是相对于图片最终大小和位置的偏移量，即动画完成后的偏移量。

解决方案：使用辅助元素

为了解决这个问题，我们可以引入一个不可见的辅助元素，该元素与图片元素大小相同，并覆盖在图片之上。辅助元素不应用过渡动画，而是直接缩放到最终状态。我们监听辅助元素的点击事件，并使用其 event.offsetX 和 event.offsetY 获取最终状态下的偏移量。

HTML 结构:

  
  @@##@@

wrapper: 用于包含图片和辅助元素的容器。
target: 辅助元素，用于接收点击事件。
img: 图片元素，应用缩放和过渡动画。

CSS 样式:

#wrapper {
  display: inline-block;
  position: relative;
  font-size: 0; /* 防止inline-block元素间的空白 */
}

#target {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 使target位于img之上，并接收点击事件 */
  pointer-events: auto; /* 确保target可以接收点击事件 */
}

#img {
  transition: 5s ease;
  z-index: 2;
  pointer-events: none; /* 禁用img的点击事件，防止干扰 */
}

wrapper 使用 position: relative，以便 target 可以使用 position: absolute 进行定位。
target 使用 position: absolute，使其覆盖在 img 之上。width: 100% 和 height: 100% 确保其与 img 大小相同。pointer-events: auto; 确保其可以接收点击事件。
img 使用 pointer-events: none，禁用其点击事件，防止干扰。

JavaScript 代码:

function onButton() {
  const img = document.querySelector("#img");
  const target = document.querySelector("#target");

  img.style.scale = 5.0;
  target.style.scale = 5.0; // 确保target的缩放比例与img一致
}

function onImage(event) {
  console.log(event.offsetX, event.offsetY);
}