本文介绍一种不依赖屏幕尺寸硬编码的 JavaScript 点击波纹动画方案，通过 pageX/pageY 获取绝对坐标并动态计算圆心偏移，确保动画始终精准出现在鼠标点击处，完美适配任意分辨率与滚动位置。
本文介绍一种不依赖屏幕尺寸硬编码的 javascript 点击波纹动画方案，通过 `pagex`/`pagey` 获取绝对坐标并动态计算圆心偏移，确保动画始终精准出现在鼠标点击处，完美适配任意分辨率与滚动位置。
在网页交互设计中，点击反馈动画（如径向波纹）能显著提升用户体验。但若使用 clientX/clientY 配合容器 getBoundingClientRect() 进行偏移计算（如原代码中的 event.clientX - 625），会导致动画位置严重失准——尤其在页面缩放、滚动或非标准分辨率下，硬编码的偏移值（如 625、335）会彻底失效。
核心问题在于坐标系选择：
-
clientX/clientY是视口坐标（相对于浏览器窗口左上角），受滚动和缩放影响； -
pageX/pageY是文档坐标（相对于整个 HTML 文档左上角），天然支持滚动定位，且无需依赖容器边界计算。
✅ 正确解法是直接使用 pageX 和 pageY，并根据圆圈尺寸做中心对齐偏移：
const handleClick = (event) => {
const radius = 75; // 对应 CSS 中 width: 150px → 半径 = 150 / 2
const x = event.pageX - radius;
const y = event.pageY - radius;
const duration = 500; // 与 CSS 动画时长一致（0.33s ≈ 330ms，此处取保守值）
showClick(event.target, x, y, duration);
};
document.addEventListener('click', handleClick);
function showClick(el, x, y, duration) {
const circle = document.createElement('div');
circle.classList.add('click-circle');
el.appendChild(circle);
// 使用 Object.assign 批量设置样式，更简洁可靠
Object.assign(circle.style, {
left: `${x}px`,
top: `${y}px`,
position: 'absolute', // 确保即使父元素无 relative 也能定位
});
circle.classList.add('click-animation');
// 注意：setTimeout 时间需 ≥ CSS animation-duration，建议取整数毫秒
setTimeout(() => {
if (circle.parentNode) {
circle.parentNode.removeChild(circle);
}
}, duration);
}
配套 CSS 保持不变，但需确保 .testArea（即 #blankBox）具有 position: relative 或 position: absolute，否则 position: absolute 的圆圈可能脱离预期容器范围：
.testArea {
position: relative; /* 关键！使绝对定位子元素以本区域为参考 */
}
.click-circle {
width: 150px;
height: 150px;
background-color: #8a26fc;
border-radius: 50%;
pointer-events: none;
z-index: 10; /* 避免被其他元素遮挡 */
}
.click-animation {
animation: click-effect 0.33s ease-out forwards;
}
@keyframes click-effect {
0% {
transform: scale(1);
opacity: 0.7;
}
100% {
transform: scale(3);
opacity: 0;
}
}
⚠️ 重要注意事项：
- 若点击目标不是
.testArea本身（例如用户点击了内部文字），需确保事件委托正确——推荐将监听器绑定在.testArea上，并检查event.target是否在有效区域内，或直接使用event.currentTarget替代event.target； - 动画结束后务必校验
circle.parentNode是否存在，防止 DOM 已移除时调用removeChild报错； - 如需限制仅在特定区域触发（如仅
.testArea内），请将document.addEventListener('click', ...)改为blankBox.addEventListener('click', ...)，避免全局监听干扰其他功能。
该方案完全脱离屏幕宽度依赖，无论用户使用手机、平板还是 4K 显示器，无论页面是否滚动或缩放，点击波纹均能精准锚定光标尖端，是构建专业级响应式交互反馈的可靠实践。
