计算CSS缩放和过渡后的鼠标位置：JavaScript事件偏移的替代方案-js教程-PHP中文网

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

碧海醫心

发布： 2025-10-15 12:24:21

原创

935人浏览过

计算css缩放和过渡后的鼠标位置：javascript事件偏移的替代方案

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

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

问题分析

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

解决方案：使用辅助元素

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

立即学习“Java免费学习笔记（深入）”；

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

HTML 结构:

<div id="wrapper">
  <div id="target" onclick="onImage(event)"></div>
  <img id="img" src="https://picsum.photos/id/237/200">
</div>

登录后复制

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);
}

登录后复制

onButton 函数用于触发缩放动画。需要确保 target 和 img 的 scale 值一致。
onImage 函数用于处理点击事件，并输出 event.offsetX 和 event.offsetY。

完整示例

<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
  display: inline-block;
  position:relative;
  font-size:0;
}
#target{
  position:absolute;
  width:100%;
  height:100%;
  pointer-events: auto; /* 确保target可以接收点击事件 */
}
#img {
  transition: 5s ease;
  z-index:2;
  pointer-events: none; /* 禁用img的点击事件，防止干扰 */
}
</style>
</head>
<body>

<button onclick="onButton()">Zoom</button>
<br>
<div id="wrapper">
  <div id="target" onclick="onImage(event)"></div>
  <img id="img" src="https://picsum.photos/id/237/200">
</div>

<script>
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);
}
</script>

</body>
</html>

登录后复制