本教程旨在解决javascript点击动画中，元素在重复点击同一位置后发生偏移的常见问题。文章深入分析了`event.target`属性变化导致坐标计算错误的根源，并提供了两种解决方案：一是通过简化坐标计算并结合`pointer-events: none` css属性，二是通过动态创建元素，确保动画元素始终在正确的点击位置出现，从而避免布局错乱并提升用户体验。
构建交互式点击动画及其挑战
在现代Web开发中，通过JavaScript创建交互式点击动画能显著提升用户体验。一个常见的例子是当用户点击屏幕时，在点击位置弹出一个短暂的动画元素，例如一个“爱心”图标。然而，在实现这类动画时，开发者可能会遇到一个令人困惑的问题：当用户连续多次点击同一位置时，动画元素可能会意外地跳到屏幕的左上角。
我们将通过一个具体的爱心点击动画案例来分析这个问题，并提供两种有效的解决方案。
初始实现与问题复现
首先，我们来看一个典型的爱心点击动画的初始实现。这个实现旨在当用户点击body时，一个预先存在的爱心图标会从点击位置弹出并播放动画。
HTML 结构 (index.html)
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Animation</title>
<link rel="stylesheet" href="style.css">
<!-- Font Awesome for heart icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="script.js" defer></script>
</head>
<body>
<i class="fa-solid fa-heart heart"></i>
</body>
</html>CSS 样式 (style.css)
body {
height: 100vh;
margin: 0; /* 移除默认外边距 */
overflow: hidden; /* 防止滚动条出现 */
cursor: pointer; /* 提示用户可以点击 */
}
.heart {
color: red;
position: absolute; /* 绝对定位，相对于最近的定位祖先或body */
font-size: 40px;
transform: translate(-50%, -50%); /* 使爱心中心对齐点击位置 */
opacity: 0; /* 默认隐藏 */
/* pointer-events: none; /* 暂时不加，以便复现问题 */ */
}
.heart.active {
animation: animate 2s linear forwards; /* 动画结束后保持最后一帧状态 */
}
@keyframes animate {
0%{ opacity: 0; font-size: 0px; }
30%{ opacity: 1; font-size: 40px; }
50%{ opacity: 1; font-size: 60px; }
70%{ opacity: 1; font-size: 50px; }
80%{ opacity: 1; font-size: 40px; }
90%{ opacity: 0.3; font-size: 20px; }
100%{ opacity: 0; font-size: 0px; }
}JavaScript 逻辑 (script.js)
const wbody = document.querySelector("body");
const hearticon = document.querySelector(".heart");
wbody.addEventListener("click", (e) => {
// 确保动画可以重新开始
hearticon.classList.remove("active");
// 强制浏览器重绘以确保动画从头开始，尤其是在快速连续点击时
void hearticon.offsetWidth;
hearticon.classList.add("active");
// 原始的坐标计算方式
let xValue = e.clientX - e.target.offsetLeft;
let yValue = e.clientY - e.target.offsetTop;
hearticon.style.left = `${xValue}px`;
hearticon.style.top = `${yValue}px`;
setTimeout(() => {
hearticon.classList.remove("active");
}, 2000);
});遇到的问题： 首次点击屏幕时，爱心图标会如预期般出现在点击位置。然而，如果在爱心图标仍然可见时，再次点击同一个位置（或爱心图标所在的区域），爱心图标会突然跳到屏幕的左上角 (0,0) 位置。
深入分析：e.target与坐标计算的陷阱
要理解这个问题，我们需要深入了解DOM事件中的e.clientX、e.clientY以及e.target、e.target.offsetLeft和e.target.offsetTop属性。
- e.clientX 和 e.clientY: 这两个属性表示鼠标点击事件相对于浏览器视口（viewport）的水平和垂直坐标。它们是绝对的视口坐标，不受滚动条或任何元素定位的影响。
- e.target: 这是触发事件的DOM元素。
- e.target.offsetLeft 和 e.target.offsetTop: 这两个属性表示 e.target 元素相对于其 offsetParent 元素的左边缘和上边缘的距离。offsetParent 通常是最近的拥有position属性（除static外）的祖先元素，如果没有，则默认为body或html。
问题的根源在于 e.target 的动态变化：
第一次点击： 当用户点击屏幕的空白区域时，e.target 是 body 元素。通常情况下，body 元素的 offsetLeft 和 offsetTop 相对于其 offsetParent（通常是 html 或 null，导致相对于视口）会非常接近于0（除非body有非零的margin/border/padding或定位）。因此，xValue = e.clientX - 0 和 yValue = e.clientY - 0 基本上等于 e.clientX 和 e.clientY，爱心被正确地定位到点击位置。
-
第二次点击： 如果第一次点击后爱心图标仍然可见（因为它正在播放动画），并且用户再次点击了爱心图标所在的区域，那么此时 e.target 将不再是 body，而是 爱心图标元素本身 (.heart)。
- 在这种情况下，e.clientX 仍然是点击位置的视口X坐标。
- 然而，e.target.offsetLeft 现在是 爱心图标元素相对于其 offsetParent 的左侧偏移量。
- 由于爱心图标已经被定位到第一次点击的位置，所以 e.clientX（点击位置的视口X坐标）和 e.target.offsetLeft（爱心图标左侧的视口X坐标）会非常接近。
- 因此，xValue = e.clientX - e.target.offsetLeft 的结果会非常接近0。同理，yValue 也会非常接近0。
- 这导致爱心图标的 left 和 top 样式被设置为 0px，从而使其跳到屏幕的左上角。
解决方案
解决此问题有两种主要方法：简化坐标计算并结合CSS属性，或者动态创建动画元素。
方案一：简化坐标计算并使用 pointer-events: none
由于爱心图标是 position: absolute 定位的，并且其 offsetParent 通常是 body，我们可以直接使用 e.clientX 和 e.clientY 来设置其 left 和 top 属性，因为它们都相对于视口进行计算。为了防止爱心图标本身成为 e.target，我们可以利用CSS的 pointer-events: none; 属性。
修正后的 JavaScript 逻辑 (script.js)
const wbody = document.querySelector("body");
const hearticon = document.querySelector(".heart");
wbody.addEventListener("click", (e) => {
hearticon.classList.remove("active");
void hearticon.offsetWidth; // 强制浏览器重绘以确保动画从头开始
hearticon.classList.add("active");
// 修正后的坐标计算方式：直接使用视口坐标
let xValue = e.clientX;
let yValue = e.clientY;
hearticon.style.left = `${xValue}px`;
hearticon.style.top = `${yValue}px`;
setTimeout(() => {
hearticon.classList.remove("active");
}, 2000);
});修正后的 CSS 样式 (style.css)
在 .heart 样式中添加 pointer-events: none;：
.heart {
color: red;
position: absolute;
font-size: 40px;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none; /* 关键：确保爱心不捕获鼠标事件 */
}
/* ... 其他样式保持不变 ... */pointer-events: none; 的作用： 这个CSS属性使得元素不再成为鼠标事件的目标。这意味着，即使鼠标指针悬停或点击在爱心图标上，事件也会“穿透”它，并由其下方的
