点击波纹特效通过动态创建圆形span元素实现，以点击位置为圆心缩放渐隐；需用clientX/Y减getBoundingClientRect()精准定位，CSS过渡控制动画，兼容多点点击与移动端，并封装为可复用函数。
点击波纹特效（Ripple Effect）本质是模拟水滴入水后扩散的动画，核心在于动态创建一个圆形 <span> 元素，以点击位置为圆心，从 0 半径开始放大并透明度渐隐。JavaScript 通过监听元素的 click 事件，计算坐标、插入临时 DOM 节点，并用 CSS 过渡或动画控制视觉变化。
获取点击坐标并创建波纹元素
需准确获取相对于目标元素左上角的点击偏移，避免使用 pageX/Y（受滚动影响），推荐用 clientX/Y 减去元素的 getBoundingClientRect() 值：
- 调用
event.target.getBoundingClientRect()获取元素在视口中的位置 - 计算
left = e.clientX - rect.left和top = e.clientY - rect.top - 创建
span元素，设置position: absolute、border-radius: 50%、初始width/height为 0 - 用
style.left和style.top将其定位到点击点中心（注意减去半径避免偏移）
用 CSS 控制波纹动画
不依赖 JavaScript 动画帧，优先使用纯 CSS 过渡实现性能更优：
- 给波纹元素添加 class（如
ripple），定义transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) - 设置动画结束后的样式：比如
transform: scale(4)、opacity: 0、background: rgba(0,0,0,0.1) - 可配合
will-change: transform, opacity提升渲染性能 - 动画结束后用
addEventListener('transitionend', ...)移除元素，防止内存堆积
兼容性与细节优化
真实项目中需处理多点点击、快速连续点击、父容器 overflow 等边界情况：
立即学习“Java免费学习笔记（深入）”；
- 为防多个波纹叠加，每次点击前先清理已存在的
.ripple元素 - 若目标元素有
overflow: hidden，确保波纹元素父级设置了position: relative且未裁剪 - 移动端需监听
touchstart并阻止默认行为（e.preventDefault()），避免延迟或误触发 - 禁用状态（
disabled或pointer-events: none）下跳过波纹逻辑
封装成可复用函数
把逻辑抽离为通用函数，支持传入选择器或 DOM 节点：
- 函数接收目标元素和配置项（如颜色、持续时间、是否禁用）
- 内部统一绑定
click和touchstart，自动适配设备 - 返回取消监听的方法，便于解绑或组件卸载时清理
- 可结合
CustomEvent触发ripple-start/ripple-end，供业务层响应
不复杂但容易忽略
