涟漪动画偏移或居中是因为未正确计算点击点相对于按钮content-box的局部坐标。需用getBoundingClientRect()获取按钮视口位置，再减去border和padding宽度，且按钮须设position: relative、ripple元素用absolute定位并减半径赋值left/top，同时移动端应优先用touchstart替代click。
涟漪动画为什么总偏移或居中？
根本原因是没正确获取点击坐标相对于按钮的局部位置。很多实现直接用 event.clientX/clientY 减去 button.getBoundingClientRect().left/top，但忽略了按钮自身的 border、padding 和 transform（比如缩放或位移），导致圆心计算偏差。更隐蔽的问题是：如果按钮有 overflow: hidden 但没设 position: relative，涟漪元素会脱离父容器裁剪范围，溢出显示。
如何用 JavaScript 精确计算点击点在按钮内的 offset
必须基于按钮的 content-box 坐标系计算，而不是简单减去 getBoundingClientRect()。关键步骤如下：
- 给按钮加
position: relative（确保子元素 absolute 定位以它为参考） - 用
event.target.getBoundingClientRect()获取按钮视口坐标 - 用
event.clientX - rect.left - parseInt(getComputedStyle(target).borderLeftWidth)得到 X 偏移（同理算 Y） - 再减去
parseInt(getComputedStyle(target).paddingLeft)才是 content 区域内的真实点击点
示例代码片段：
button.addEventListener('click', (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left -
parseInt(getComputedStyle(e.target).borderLeftWidth) -
parseInt(getComputedStyle(e.target).paddingLeft);
const y = e.clientY - rect.top -
parseInt(getComputedStyle(e.target).borderTopWidth) -
parseInt(getComputedStyle(e.target).paddingTop);
// 后续创建 ripple 元素并设置 left=x, top=y
});ripple 元素的 CSS 必须满足哪些条件才能准确定位
只设 position: absolute 不够，还必须控制尺寸基准和动画行为：
立即学习“前端免费学习笔记（深入）”；
-
width和height要设为0初始值，靠transform: scale(0)启动动画更平滑 -
left和top必须用像素值（非百分比），且值为上面算出的x、y减去半径（即left: ${x - radius}px） - 必须加
pointer-events: none，否则新元素会拦截后续点击 - 推荐用
will-change: transform提升动画层，避免重排
常见错误：left: 50%; top: 50% 配合 transform: translate(-50%, -50%) ——这只能居中，无法响应点击位置。
移动端 click 事件失效或延迟怎么办
真机上 click 有约 300ms 延迟，且某些场景（如快速连点、滚动中点击）可能不触发。应改用 mousedown 或 touchstart，并做兼容处理：
- 监听
touchstart优先，回退到mousedown - 对
TouchEvent，取e.touches[0].clientX而非e.clientX - 阻止默认行为：
e.preventDefault()防止部分安卓浏览器触发双击缩放 - 注意：不要同时绑定
click和touchstart，否则可能触发两次动画
定位逻辑本身不变，只是事件源从 click 换成 touchstart 或 mousedown。
最易被忽略的是按钮的 box-sizing ——如果它是 border-box（默认），前面减去的 border 和 padding 就必须严格对应；如果手动设成 content-box，计算方式就得反过来。实际项目里建议统一保持 box-sizing: border-box，并在 JS 中显式读取样式值，别硬编码假设。
