英文:
If I click twice on the same position, then the heart icon shifts to the top left position of the screen
问题
我想使用JS构建一个简单的点击心形动画。每当用户在屏幕上的任意位置单击时，一个心形图标将从该特定点弹出，持续2秒钟。它可以工作，但如果我在相同的位置连续点击两次，心形图标将移到屏幕左上角的位置。请帮我修复这个错误。这是我的项目链接 - " https://codesandbox.io/s/dreamy-wood-2k4gyp?file=/index.js "
const wbody = document.querySelector("body");
const hearticon = document.querySelector(".heart")
wbody.addEventListener("click", (e) => {
hearticon.classList.add("active");
console.log(e);
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);
});
body{
height: 100vh;
}
.heart {
color: red;
position: absolute;
font-size: 40px;
/* left: 50%;
right: 50%; */
transform: translate(-50%, -50%);
opacity: 0;
}
.heart.active{
animation: animate 2s linear infinite;
}
@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;
}
}
<!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">
<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>
英文:
I want to build a simple click heart animation using JS. Whenever a user clicks anywhere in the screen a heart pops up from that particular point for 2 sec. It works, but if I click twice on the same position, the heart icon shifts to the top left position of the screen. Please help me to fix this bug. here is the link of my project - " https://codesandbox.io/s/dreamy-wood-2k4gyp?file=/index.js "
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const wbody = document.querySelector("body");
const hearticon = document.querySelector(".heart")
wbody.addEventListener("click", (e) => {
hearticon.classList.add("active");
console.log(e);
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);
});
<!-- language: lang-css -->
body{
height: 100vh;
}
.heart {
color: red;
position: absolute;
font-size: 40px;
/* left: 50%;
right: 50%; */
transform: translate(-50%, -50%);
opacity: 0;
}
.heart.active{
animation: animate 2s linear infinite;
}
@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;
}
}
<!-- language: lang-html -->
<!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">
<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>
<!-- end snippet -->
答案1
得分: 1
当您第一次点击时，一切都正常，因为e.target等于文档的主体，这是正常的。
但是当您第二次点击时，e.target等于心形图标。
在这种情况下，e.clientX等于e.target.offsetLeft（对于clientY也是如此），xValue和yValue都等于0。
这就是您提到的行为原因。
我认为您可以从e.clientX（对于Y也是如此）中去掉减法e.target.offsetLeft，然后它将正常工作。
let xValue = e.clientX;
let yValue = e.clientY;
英文:
When you click first time everything is ok because e.target = document's body and it's fine.
But when you click second time e.target = heart icon.
In this case e.clientX becomes equal to e.target.offsetLeft (the same for clientY) and xValue and yValue are equal to 0.
That's why you have behaviour you mention.
I think you can remove subtraction e.target.offsetLeft from e.clientX (the same for Y) and it will work.
let xValue = e.clientX;
let yValue = e.clientY;
答案2
得分: 1
你可以直接使用 e.offsetX 和 e.offsetY 分别作为 xValue 和 yValue，而不是计算偏移量（例如 e.clientX - e.target.offsetLeft）。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论