JS点击爱心动画Bug修复请求：重复点击同位置爱心偏移至左上角

问题描述 #

实现点击屏幕任意位置弹出爱心动画，显示2秒后消失。当前功能基本可用，但重复点击同一位置时，爱心会偏移到屏幕左上角。

问题原因 #

原代码中计算位置时依赖e.target.offsetLeft和e.target.offsetTop，但e.target会随点击目标变化：

• 首次点击空白区域时，e.target是body，坐标计算正常；
• 动画过程中爱心处于可见状态，重复点击会命中爱心元素（.heart），此时e.target变为爱心元素，它的offsetLeft/offsetTop与body不一致，导致计算出的坐标错误，爱心偏移到左上角。

修复方案 #

由于爱心是绝对定位在body下，直接使用点击位置相对于视口的坐标（e.clientX/e.clientY）即可，结合CSS中的transform: translate(-50%, -50%)，能让爱心中心精准对准点击位置。

修改后的JavaScript代码：

const wbody = document.querySelector("body");
const hearticon = document.querySelector(".heart")

wbody.addEventListener("click", (e) => {
    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);
});

额外优化（可选） #

如果需要支持连续点击生成多个独立爱心（而非复用同一个），可以在每次点击时动态创建爱心元素，避免复用导致的动画中断问题：

const wbody = document.querySelector("body");

wbody.addEventListener("click", (e) => {
    // 动态创建新的爱心元素
    const hearticon = document.createElement("i");
    hearticon.className = "fa-solid fa-heart heart active";
    
    let xValue = e.clientX;
    let yValue = e.clientY;
    hearticon.style.left = `${xValue}px`;
    hearticon.style.top = `${yValue}px`;
    
    wbody.appendChild(hearticon);
    
    // 动画结束后自动移除元素
    setTimeout(() => {
        hearticon.remove();
    }, 2000);
});

内容的提问来源于stack exchange，提问作者Akash Das