原生 button 无法直接触发 CSS 水波纹，因其 :active 伪类不提供点击坐标且伪元素无法动态定位；真实水波纹依赖 JavaScript 监听事件获取坐标、创建绝对定位的圆形涟漪元素，并需父容器 relative + overflow hidden、复用元素防堆叠、移动端用 touchstart 替代 click、适配尺寸与缓动。
为什么原生 button 无法直接触发 CSS 水波纹？
因为水波纹本质是「点击位置的径向渐变动画」，而原生 button 的 :active 伪类不提供坐标信息，也无法在伪元素中动态设置 left/top。你看到的“水波纹”效果，几乎全是 JavaScript 驱动的 —— 它监听 click 事件，读取 event.clientX/clientY，再动态创建一个 span 或 div 元素作为涟漪容器。
ripple 动画必须用 position: absolute 定位
水波纹要从点击点中心扩散，父容器必须设为 position: relative，否则 left 和 top 会相对于整个页面定位，导致偏移错乱。
- 父元素（如
button）需加position: relative; overflow: hidden; - 涟漪元素必须是绝对定位：
position: absolute; border-radius: 50%; - 初始尺寸建议设为
width: 0; height: 0;，靠transform: scale(0)更平滑（避免 layout 触发）
如何避免多次点击产生多个涟漪？
用户快速连点时，若不控制，会不断插入新 span，造成 DOM 泄漏和动画堆叠。核心解法是：复用单个涟漪元素 + 动画重置。
- 每次点击先检查是否存在正在动画的
.ripple元素，有则remove() - 创建新涟漪前，用
getComputedStyle(ripple).opacity判断是否已结束（或更可靠：用animationend事件监听） - 关键技巧：给涟漪加
pointer-events: none;，防止它拦截后续点击
const ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.left = `${x - size/2}px`;
ripple.style.top = `${y - size/2}px`;
ripple.style.width = `${size}px`;
ripple.style.height = `${size}px`;
ripple.style.pointerEvents = 'none';
button.appendChild(ripple);
// 动画结束后自动移除
ripple.addEventListener('animationend', () => ripple.remove());
移动端 touchstart 替代 click 才能及时响应
click 在移动端有约 300ms 延迟，水波纹会明显滞后。必须监听 touchstart，且注意兼容：PC 端仍需 mousedown，不能只写一个事件。
立即学习“前端免费学习笔记（深入）”；
- 同时绑定
mousedown和touchstart，并在回调里统一处理event.touches?.[0] || event - 记得调用
event.preventDefault()（尤其touchstart），防止滚动干扰 - 别忘了禁用默认高亮：
button { -webkit-tap-highlight-color: transparent; }
真实项目中容易忽略的是「涟漪尺寸计算」：用 Math.max(button.clientWidth, button.clientHeight) * 2 而不是固定值，才能适配不同大小按钮；还有动画时长与缓动函数的选择——ease-out 比 linear 更接近真实水波衰减感。
